☞Common applications :
游戏界面text voice, 商城导航栏voice input search box, 聊天界面voice text input, etc.
Quoted from the official unicloud official voice :
The voice input interface allows web developers to quickly call the device's microphone for voice input without installing additional browser plug-ins. The specification does not define the technical architecture of the underlying speech recognition engine. The browser implementation can be based on a speech recognition server or a local built-in speech recognition module.
▲ Configure SDK-Recognize Xunfei voice
(if you can't use Xunfei voice, you can change to Baidu voice and see the access document yourself)
enter the project root directory manifest.json-> App模块配置-> speechcheck Xunfei voice recognition, as shown below:
▲ index.vueFile writing
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<button @click="voiceBegain">讯飞语音识别</button>
<view v-if="words1">
这是searchValue：{
{words1}}
</view>
<view v-if="words2">
这是searchText：{
{words2}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
words1: '',
words2: ''
}
},
onLoad() {
},
methods: {
send() {
uniCloud.callFunction({
name: 'sendcode',
success: (e) => {
console.log('这是发送验证码', e);
}
})
},
// 调用讯飞语音识别
voiceBegain() {
let _this = this;
let options = {
};
//#ifdef APP-PLUS || APP-PLUS-NVUE
options.engine = 'iFly';
options.punctuation = false; // 是否需要标点符号
options.timeout = 10 * 1000; //语音录入持续时长
plus.speech.startRecognize(options, function(s) {
_this.searchText = _this.searchText + s;
console.log(_this.searchText) //拿到语音识别的结果
//下面是逻辑
_this.searchValue = s;
_this.searchText = ""
// 打印输出结果
_this.words1 = _this.searchValue
_this.words2 = _this.searchText
// 关闭语音
plus.speech.stopRecognize();
});
//#endif
// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
As shown:
☀ run
云打包 or 自定义调试基座generated apk file, apk installed to the phone;
click on the buttonbutton to trigger custom callback function
Page output at this time
note:
There is no ordinary browser plusenvironment to run only after HBuilder real machine running and packaging plus api. Otherwise, an error will be reported:
