实现的功能是获取语音,并将语音转为文字,实现效果如下:
1. 小程序后台添加插件:微信同声传译
登录小程序后台:https://mp.weixin.qq.com
11. 设置 -> 第三方设置 -> 添加插件
12. 输入“微信同声传译”,点击搜索,之后选择并点击添加
13. 成功添加后,点击详情
14. 复制它的AppID和最新版本号(后序有用)。
2. 配置
去app.json进行配置
其中,version的值对应上面的版本号,provider的值对应上面的AppID
"plugins": {
"WechatSI": {
"version": "0.3.0",
"provider": "wx069ba97219f66d99"
}
},
3. 代码实现
31. wxml代码
<view class="yuyinWrap">
<textarea class='yuyinCon' placeholder='请输入内容' value='{{content}}'></textarea>
<!-- -->
<view class=''>
<button class="yuyinBtn {{recordState == true ? 'yuyinBtnBg':''}}" bindtouchstart="touchStart" bindtouchend="touchEnd">
<text wx:if="{{recordState == false}}">按住 说话</text>
<text wx:else>松开 结束</text>
</button>
</view>
<!-- 开始语音 弹出语音图标表示正在录音 -->
<cover-view class="startYuyinImage" wx:if="{{recordState == true}}">
<cover-image src="../resource/image/yuyin-min.png"></cover-image>
<cover-view>开始语音</cover-view>
</cover-view>
</view>
效果如下:
32. js 实现代码
实现了textarea可以手动输入,也可以语音转为文字填入。代码解析看注释。
具体可以看官网:https://developers.weixin.qq.com/miniprogram/dev/extended/service/translator.html
const app = getApp();
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
Page({
/**
* 页面的初始数据
*/
data: {
//语音
recordState: false, //录音状态
content:'',//内容
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//识别语音
this.initRecord();
},
// 手动输入内容
conInput: function (e) {
this.setData({
content:e.detail.value,
})
},
//识别语音 -- 初始化
initRecord: function () {
const that = this;
// 有新的识别内容返回,则会调用此事件
manager.onRecognize = function (res) {
console.log(res)
}
// 正常开始录音识别时会调用此事件
manager.onStart = function (res) {
console.log("成功开始录音识别", res)
}
// 识别错误事件
manager.onError = function (res) {
console.error("error msg", res)
}
//识别结束事件
manager.onStop = function (res) {
console.log('..............结束录音')
console.log('录音临时文件地址 -->' + res.tempFilePath);
console.log('录音总时长 -->' + res.duration + 'ms');
console.log('文件大小 --> ' + res.fileSize + 'B');
console.log('语音内容 --> ' + res.result);
if (res.result == '') {
wx.showModal({
title: '提示',
content: '听不清楚,请重新说一遍!',
showCancel: false,
success: function (res) {}
})
return;
}
var text = that.data.content + res.result;
that.setData({
content: text
})
}
},
//语音 --按住说话
touchStart: function (e) {
this.setData({
recordState: true //录音状态
})
// 语音开始识别
manager.start({
lang: 'zh_CN',// 识别的语言,目前支持zh_CN en_US zh_HK sichuanhua
})
},
//语音 --松开结束
touchEnd: function (e) {
this.setData({
recordState: false
})
// 语音结束识别
manager.stop();
},
})
注意:测试时,在微信开发者工具无效果,要预览或者真机调试下,手机进行测试。 文章来源:https://www.toymoban.com/news/detail-463648.html
————————————————
版权声明:本文为CSDN博主「星星之火M」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41638795/article/details/98080498文章来源地址https://www.toymoban.com/news/detail-463648.html
到了这里,关于微信小程序 -- 获取语音,并将语音转为文字(插件:微信同声传译)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!