uniapp语音识别（讯飞语音）转文字
<p>常见应用：<code>游戏界面</code> 文字语音、<code>商城导航栏</code>的语音输入搜索框、<code>聊天界面</code>的语音文字输入等.</p><p>引自官方 unicloud官方语音：</p>
<blockquote><p>语音输入接口可使得网页开发人员能快速调用设备的麦克风进行语音输入，而不需要安装额外的浏览器插件。规范不定义底层语音识别引擎的技术架构，浏览器实现可基于语音识别服务器或本地内置语音识别模块。</p></blockquote>
<p><strong>配置SDK–识别讯飞语音</strong>（如果用不了讯飞语音，可换百度语音，自己去看接入文档）</p>
<p>进入项目根目录下的 <code>manifest.json</code> -> <code>App模块配置</code>-><code>speech</code> 勾选 讯飞语音识别，如下图所示：</p>
<p style="text-align:center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202212/202212241459381.png" /></p>
<p><code>index.vue</code>文件写入</p>
<div class="jb51code"><pre class="brush:xhtml;"><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>
</pre></div>
<p>如图：</p>
<p style="text-align:center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202212/202212241459382.png" /></p>
<p><strong>运行</strong><code>云打包</code>或<code>自定义调试基座</code>生成 <strong>apk</strong> 文件，apk安装到手机上;</p>
<p>点击<code>button</code>按钮，触发自定义回调函数</p>
<p style="text-align:center"><img alt="在这里插入图片描述" height="1202" src="https://img.jbzj.com/file_images/article/202212/202212241459383.png" width="555" /></p>
<p>此时页面输出</p>
<p style="text-align:center"><img alt="在这里插入图片描述" height="1419" src="https://img.jbzj.com/file_images/article/202212/202212241459384.png" width="655" /></p>
<p>注意：</p>
<p>普通浏览器里没有 <code>plus</code> 环境，只有 HBuilder 真机运行和打包后才能运行<code>plus api</code>。否则报错：</p>
<p style="text-align:center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202212/202212241459385.png" /></p>
<div class="cros igoods"><div class="goodsin" data-img="https://img14.360buyimg.com/pop/jfs/t1/216380/11/24017/48924/6392d974E3376a0f2/66cbcf5ba2955345.jpg" data-name="保姆级uni-app多端跨平台开发从入门到企业级实战前端框架视频讲解书籍教材基础教程 零基础入门h5网页android ios快应用开发点餐应用微信京东百度小程序移动" data-owner="京东自营" data-price="108" data-tgid="20" data-url="https://union-click.jd.com/jdc?e=&p=JF8BAMkJK1olXwUAU11UD0sRBV8IGVgVWA4GUm4ZVxNJXF9RXh5UHw0cSgYYXBcIWDoXSQVJQwYAV15YAE8RHDZNRwYlP1l0UwUqDQxyex1IHiFDDWV_XDUhaEcbM2gNHF4dXwMBZF5eDkwXAmoIK2sVXDZQOobrvpOysnPcsdTA1ZEyVW5dD00XCmgMHlwRWgEKZF5VDHtUVypcWBhdbTYyV25tOEsnAF9WdVpGWwQCVwpaZhZFAzJTHwxAMwEDV1xVD04RM20JGlkXbTY"></div></div>
<p>以上就是uniapp语音识别（讯飞语音）转文字的详细内容，更多关于uniapp语音识别（讯飞语音）转文字的资料请关注琼殿技术社区其它相关文章！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>uniapp调用百度语音实现录音转文字功能</li><li>uniapp页面完成水印添加功能代码示例(自定义文字)</li><li>uniApp前端实现文字识别并提取详细分析</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]