微信小程序语音提示
- 2022 年 9 月 7 日
- 笔记
- wx.createInnerAudioContext, 小程序语音提示, 微信小程序, 语音提示
一. 老规矩, 先上demo图:
然后通过 wx.createInnerAudioContext 创建内部 audio 上下文 InnerAudioContext 对象 就能播放 filename的语音链接
二. 语音提示 –方法归类总结
1. 使用wx.playVoice播放语音文件, 但是从基础库 1.6.0 开始，本接口停止维护，请使用 wx.createInnerAudioContext 代替; 官方链接: //developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.playVoice.html (废弃)
2. 小程序插件 + wx.createInnerAudioContext 优点: 使用简单，直接播放录制好的音频文件; 缺点: 功能单一，无法定制，大写英文无法识别，部分小写英文发音不准
3. 第三方语音服务 + wx.createInnerAudioContext 优点: 功能强大, 可定制, 满足复杂场景; 缺点: 需要服务端对接; 还要付费;
第三方语音平台: 1.腾讯Ai 2.科大讯飞 3. 百度AI 4. 阿里云
三. 这边我讲解 第二种: 小程序插件 + wx.createInnerAudioContext 官方链接://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.html
小程序插件: 微信同声传译
后台添加: 设置
在项目根目录app.json文件中配置:
//app.json
......
"plugins": { "WechatSI": { "version": "0.3.5", "provider": "wx069ba97219f66d99" } }
1.代码:
<!--pages/activity/activity.wxml--> <view class="activity"> <input bindinput="bindKeyInput" value="{{inputValue}}" placeholder="请输入语音提示的文字"/> <button bindtap="textToSpeech" type="primary">语音提示</button> </view>
// 引入封装的语音提示 import {sayTips} from '../../utils/tools/sayTips' Page({ /** * 页面的初始数据 */ data: { inputValue:'' }, // 输入 bindKeyInput(e){ this.setData({ inputValue: e.detail.value.trim() }) }, // 语音提示 textToSpeech(){ sayTips(this.data.inputValue || '哈哈哈') } })
自己封装的 sayTips.js
/** * 语音提示封装 * @param {String} content 提示的文字内容 * 插件链接文档: //mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99&token=1799717629&lang=zh_CN */ const plugin = requirePlugin('WechatSI'); export const sayTips = text => { // 从基础库 1.6.0 开始，本接口停止维护，请使用 wx.createInnerAudioContext 代替 // 官方wx.createInnerAudioContext文档: //developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.html const innerAudioContext = wx.createInnerAudioContext() // 调用插件的方法 plugin.textToSpeech({ lang: 'zh_CN', content: text, success: function (res) { console.log(res) innerAudioContext.src = res.filename; innerAudioContext.play(); }, fail: function(err) { console.log("fail tts", err) } }) }
大家可以直接复制粘贴, 测试
其他参考链接: //zhuanlan.zhihu.com/p/551956789
