Use vue3 to implement a human-cat communication applet

Preface

I believe that many people who keep cats want to communicate with their cats. When cats meow with various different sounds, they usually ask the cats what's wrong, whether they are hungry, or something like that. I have also searched for pet translation software, and now I will make one myself [manual dog head].

WeChat mini programs do not support direct development using Vue, but there are already many solutions in the industry to support the development of cross-end applications using various development frameworks.

Taro version 3.0 starts to support development with Vue3, so let’s use Taro to implement our WeChat applet.

Initialize the project

For detailed usage of Taro, please refer to the official documentation. First install @tarojs/cli globally

npm install -g @tarojs/cli

After successful installation, use the taro command to create a template project:

taro init catApp

The vue3-nutUI framework is chosen here. This framework does not have as many functions as taro-ui, but taro-ui only supports react, so I have no choice but to use it.

design

After all, without visual output, you have to rely on yourself. Open PPT immediately and draw a simple sketch.

There are two main functional components:

• Enter what you want to say to the cat and convert it into meow language for playback
• Record, record the meow, convert it into text, and play the recording

Code Implementation

Load on demand

Introduce the vue3-nutUI framework on demand. It has been introduced on demand when initializing the project just now. In app.js, just introduce the components needed for the project on demand.

import { createApp } from 'vue'
import { Button,Toast,Tabbar,TabbarItem,Icon,Avatar,Input } from '@nutui/nutui-taro';
import '@nutui/nutui-taro/dist/style.css';

const App = createApp()
App.use(Button).use(Toast).use(Tabbar).use(TabbarItem).use(Icon).use(Avatar).use(Input)

export default App

Play Audio

After you input what you want to say to the cat owner and convert it into meow language, if you want to play it, you have to use the audio playback interface provided by Taro. Audio playback now uses the more official Taro.createInnerAudioContext interface. The original Taro.stopVoice and Taro.playVoice are no longer maintained.

const innerAudioContext = Taro.createInnerAudioContext();
Taro.setInnerAudioOption({
	obeyMuteSwitch: false,
});

innerAudioContext.src = 'xxx.mp3';
innerAudioContext.play();

innerAudioContext.onPlay(()=>{
	console.log('Start playing')
})
innerAudioContext.onEnded(()=>{
	console.log('playback ends')
})

The obeyMuteSwitch configuration is (only effective on iOS) whether to obey the mute switch. After setting it to false, the sound can be played even in silent mode. The default is true. I didn't pay attention here and was confused for a long time. I thought there was something wrong with my audio playback, but it turned out that it was muted.

recording

To record the cat owner, you need to use the Taro.getRecorderManager recording interface

const recorderManager = Taro.getRecorderManager();
recorderManager.onStart(() => {
	console.log("recorder start");
});
recorderManager.onStop((res) => {
	console.log("recorder stop", res);
	const { tempFilePath, duration } = res;
	// tempFilePath is the temporary path of the recording file // duration is the duration of the recording // If you need to play it here, set the recording file address, then you can play the recording innerAudioContext.src = tempFilePath;
	innerAudioContext.play();
});

Long press event

When recording, you may be accustomed to long pressing to start recording and releasing it to complete the recording. The vue3-nutUI framework does not provide a long press event for buttons, so you need to use the longpress event provided by the applet natively. This event is triggered when the finger touches for more than 350ms, and will not trigger the tap event. If you want to end the recording by letting go, you need to combine it with the touchend event to complete the requirement of long pressing to record and letting go to end it.

<nut-button block type="info" icon="microphone" @longpress="handleLongpress" @touchend="handleTouchend">
	Recording</nut-button>

Run Debug

Execute npm run dev:weapp project, which will monitor file modifications and compile into a mini-program in real time. Then open the WeChat developer tool, import the project, choose to open the catApp root directory, and you can preview it.

Summarize

The advantage of Taro is that you can write code once and adapt it to multiple terminals. If you just use it to develop a WeChat applet, it’s still a long way to go. Wouldn’t it be better to just develop it natively? However, being able to use Vue3 for development is still quite attractive, but Vue3 uses Proxy internally, and it cannot be used directly under lower version systems (iOS 9, Android 6). At present, it is impossible to abandon these users directly, so it is still not very practical.

At this point, some people may ask, how to achieve cat language conversion? ? To be honest, the world hasn't yet developed the ability to communicate with cats. Here we just use some local resource files and hardcoded data. Just play with it for entertainment and don't take it too seriously. Once the industry has this capability and provides an interface, the function will be truly realized through access. Just as Megvii has been deepening its efforts in the fields of artificial intelligence and deep learning, is it possible to develop this kind of simple communication capability by training various meow sounds and combining various meow scenarios?

The complete code is in the github repository, and those who are interested can download it and play with it.

This concludes this article about using vue3 to implement a human-cat communication applet. For more relevant vue3 human-cat communication applet content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!