微信小程序语音播放功能的实现

article/2025/10/24 1:27:52

1.想要实现微信的语音播放需要在微信公众号后台下载微信同声传译插件，可以去微信服务平台搜索此插件并下载，指定对应的小程序号就行了。

2.下载完在微信小程序后台--设置--第三方设置-- 插件管理-- 进入微信同声传译详情复制插件AppID 到 app.json 进行配置：

app.json：

"plugins": {"WechatSI": {"version": "0.3.5","provider": "wx069ba97219f66d99"}}

wxml:

<view class="wrap"><textarea class='content' placeholder='请输入内容' value='{{content}}' bindinput='content'></textarea><view class='box'><button class="btn start" size="mini" bindtap='start'>开始</button><button class="btn" size="mini" bindtap='end'>结束</button></view>
</view>

//引入插件：微信同声传译
const plugin = requirePlugin('WechatSI');
//创建内部 audio 上下文 InnerAudioContext 对象。
const innerAudioContext = wx.createInnerAudioContext();
Page({data: {content: '',//内容src:'', //},onReady(e) {innerAudioContext.onError(function (res) {console.log(res);wx.showToast({title: '语音播放失败',icon: 'none',})}) },// 手动输入内容content(e) {//   console.log(e);this.setData({content: e.detail.value,})},// 文字转语音start (e) {var that = this;var content = this.data.content;plugin.textToSpeech({lang: "zh_CN",tts: true,content: content,success: function (res) {console.log(res);console.log("succ tts", res.filename);that.setData({src: res.filename})that.yuyinPlay();},fail: function (res) {console.log("fail tts", res)}})},//播放语音yuyinPlay(e) {if (this.data.src == '') {console.log(暂无语音);return;}// console.log("正在播放");innerAudioContext.autoplay = trueinnerAudioContext.src = this.data.src //设置音频地址innerAudioContext.play(); //播放音频},// 结束语音end (e) {innerAudioContext.pause();//暂停音频},})

wxss:

.wrap {margin-top:300rpx;height: 200px;}.content {border: 1px solid #ccc;margin: 0 auto;padding: 10rpx 10rpx 70rpx;}.btn {width: 100px;height: 70rpx;border: 1px solid #eee;background: #fff;color: #606267;margin-left: 100px;}.box{width: 300px;/* border: 1px solid red; */}.start{margin-left: 40px;}

PS:长文本处理，由于语音播放文本限制为：1000字节。需要进行分段处理

// 点击朗读readlongText() {//同声传译一次最多1000字节,长文本按300字进行截断,然后按照朗读速度估算300字的时间,延迟下一次读取,正常300字/1分17秒let arrText = this.data.content.replace(/\r/g, ",").replace(/\n/g, ",").replace(/\s+/g, ",").replace(/#/g, ",");console.log(arrText, arrText.length) //获取全文+总数字//     arrText= arrText.replace(/[`:_.~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~！@#￥%……&*（）—— \+ ={}|《》？：“”【】、；‘’，。、]/g,// ''); //去除标点符号if (arrText.length < 300) {// 总数字小于300，直接转为语音this.read(arrText)} else {// 总数字大于300，拆分成多个段落const num = Math.ceil(arrText.length / 300)const time = 75for (let i = 0; i < num; i++) {const text = arrText.substr(0 + i * 300, 300) //全文分成多个300字的段落console.log(text)setTimeout(() => {this.read(text)}, time * 1000 * i); //每隔1分17秒读一段}}},// 文字转语音read(content) {var that = this;plugin.textToSpeech({lang: "zh_CN",tts: true,content: content,success: function (res) {// console.log(res);// console.log("succ tts", res.filename);that.setData({src: res.filename})that.yuyinPlay();},fail: function (res) {console.log("fail tts", res)}})},//播放语音yuyinPlay(e) {if (this.data.src == '') {console.log(暂无语音);return;}// console.log("正在播放");innerAudioContext.autoplay = trueinnerAudioContext.src = this.data.src //设置音频地址innerAudioContext.play(); //播放音频},// 结束语音end(e) {innerAudioContext.pause(); //暂停音频},