☞ Aplicaciones comunes :
游戏界面voz de texto, 商城导航栏cuadro de búsqueda de entrada de voz, entrada de 聊天界面texto por voz, etc.
Citado de la voz oficial oficial de unicloud :
La interfaz de entrada de voz permite a los desarrolladores web llamar rápidamente al micrófono del dispositivo para la entrada de voz sin instalar complementos de navegador adicionales. La especificación no define la arquitectura técnica del motor de reconocimiento de voz subyacente La implementación del navegador puede basarse en un servidor de reconocimiento de voz o en un módulo de reconocimiento de voz incorporado local.
▲ Configure SDK-Recognize Xunfei voice
(si no puede usar Xunfei voice, puede cambiar a Baidu voice y ver el documento de acceso usted mismo)
ingrese al directorio raíz del proyecto manifest.json-> App模块配置-> speechverifique el reconocimiento de voz Xunfei, como se muestra a continuación:
▲ index.vueEscritura de archivos
<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>
Como se muestra:
☀ ejecutar
云打包 o 自定义调试基座generar un archivo apk , apk instalado en el teléfono;
haga clic en el buttonbotón para activar la función de devolución de llamada personalizada
Salida de página en este momento
Nota:
No existe un plusentorno de navegador ordinario que se ejecute solo después de que la máquina real de HBuilder se ejecute y empaquete plus api. De lo contrario, se informará un error:
