Suck the cat with code! This article is participating in the cat essay Activity.

preface

Many cat owners are eager to communicate with their cats. When they meow in a variety of noises, they will often ask what is wrong, if they are hungry or whatever. I have also searched for pet translation software, now to achieve their own [manual dog head].

Wechat applet does not support the development of vUE directly, but there are many solutions in the industry to support the development of cross-end applications with a variety of development frameworks. Taro 3.0 now supports Vue3 for development, so use Taro to implement our wechat mini program.

Initialize the project

For details about the use of Taro, please refer to the official documentation. Install @tarojs/cli first

npm install -g @tarojs/cli
Copy the code

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

taro init catApp
Copy the code

Vue3-nutui is used here. The taro-UI framework does not have as many functions as taro-UI. However, taro-UI only supports React.

design

After all, there is no visual map, everything has to rely on yourself. Immediately open up the POWERPOINT and simply draw a sketch.

It mainly consists of two functions:

  • Type in what you want to say to your cat and play it in meow
  • Record your meow, turn it into text, or play it back

Code implementation

According to the need to load

The vue3-Nutui framework was introduced on demand when the project was initialized. In app.js, the components needed for the project are introduced 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
Copy the code

Playback of audio

Taro (Taro) has to use the audio interface provided by Taro if you want to play the cat’s voice after typing the words you want to speak to the cat’s owner. Playback of audio using official now more recommended Taro. CreateInnerAudioContext interfaces, the original Taro. StopVoice and Taro playVoice 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('End of play')})Copy the code

ObeyMuteSwitch configures whether to follow the mute switch (iOS only). When set to false, sound can be played even when in mute mode. The default is true.

The recording

To record cat owners, 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 for recording files
	// duration Indicates the recording duration
	// If the recording file needs to be played, set the recording file address
	innerAudioContext.src = tempFilePath;
	innerAudioContext.play();
});
Copy the code

Long press event

Recording Maybe we are used to a long time to start recording, release the recording to finish. The vue3-nutui framework does not provide a longpress event for buttons, so we need to use the longpress event provided by the applet natively. This event will be triggered after the finger touch exceeds 350ms, and will not trigger the tap event. If you want to release the recording, you need to combine the Touchend event to complete the requirement of long press recording and release the recording.

<nut-button block type="info" icon="microphone" @longpress="handleLongpress" @touchend="handleTouchend">The recording</nut-button>
Copy the code

Run the debug

When the NPM Run Dev: Retry P project is executed, the app will continuously monitor file changes and compile them into mini-programs in real time. Then, open the developer tools of wechat, import the project, and click the catApp root directory to preview.

conclusion

Taro’s advantage in writing a code adaptation, if it is simply used to develop a small wechat program, it is still far away, direct native development is not sweet. However, it is nice to use Vue3 for development, but Vue3 uses Proxy in its internal implementation, which still cannot be used directly in earlier versions (iOS 9 and Android 6). At present, it is impossible to directly abandon these users, so it is still not practical.

Here may be some people will ask, how to achieve meow conversion? Hong Kong true, the world has not been able to study this kind of communication with cats, here is just some local resources file, write dead data, we play entertainment good don’t take it too seriously. When the industry has the capability to provide the interface, and then access is really functional. Just as Megvii has been digging deeper into artificial intelligence and deep learning, it’s possible that the ability to communicate simply can be developed by training a variety of meows and combining them with a variety of meows.

The complete code is put in github repository, if you are interested, you can download and play.