微信小程序语音广播
最编程
2024-04-27 20:29:35
...
需求:需要用户一开始进入小程序的某个页面就进行语音播报;
解决方案:使用微信小程序插件“微信同声传译”可以达到该功能;
具体实现:
1、微信公众平台=>设置=>第三方设置=>插件管理=>添加插件=>'微信同音传译'=>添加(目前暂不支持个人开发者使用):
2、引入小程序插件:
2.1 复制插件AppID
2.2 打开项目中的manifest.json=>源码视图=>添加如下代码:
3、具体代码实现:
<template> <view class="content"> <button @click="openVoice">播放语音</button> </view> </template> <script> const plugin = requirePlugin('WechatSI'); const innerAudioContext = wx.createInnerAudioContext(); export default { data() { return { title: 'Hello' }; }, onLoad() { this.openVoice(); }, onReady() { innerAudioContext.onError(function (res) { wx.showToast({ title: '语音播放失败', icon: 'none' }); }); }, methods: { openVoice() { let _this = this; console.log(plugin); plugin.textToSpeech({ lang: 'zh_CN', tts: true, content: '支付宝成功收款200万元', success: function (res) { console.log('succ tts', res.filename); _this.yuyinPlay(res.filename) }, fail: function (res) { console.log('fail tts', res); }, complete: function (res) { console.log('complete tts', res); } }); }, yuyinPlay(src) { if (src == '') { return; } innerAudioContext.autoplay = true; innerAudioContext.src = src; //设置音频地址 innerAudioContext.play(); //播放音频 } } }; </script>
4、如果播报的内容比较多的话,可以采取分段播放处理:
<template> <view class="content"> <button @click="handleMoreText('支付宝成功收款200万元')">播放语音</button> </view> </template> <script> const plugin = requirePlugin('WechatSI'); const innerAudioContext = wx.createInnerAudioContext(); export default { data() { return { title: 'Hello' }; }, onLoad() { this.handleMoreText('支付宝成功收款200万元'); }, onReady() { innerAudioContext.onError(function (res) { wx.showToast({ title: '语音播放失败', icon: 'none' }); }); }, methods: { /** * @description: 处理文本 同声传译一次最多1000字节,长文本按300字进行截断,然后按照朗读速度估算300字的时间,延迟下一次读取,正常300字/1分17秒 * @param {*} content * @return {*} */ handleMoreText(content) { let arrText = content.replace(/\r/g, ',').replace(/\n/g, ',').replace(/\s+/g, ',').replace(/#/g, ','); // 去除标点符号 console.log(arrText, arrText.length); // 获取全文+总数字 if (arrText.length < 300) { // 总数字小于300,直接转为语音 this.openVoice(arrText); } else { // 总数字大于300,拆分成多个段落 const num = Math.ceil(arrText.length / 300); const time = 75; for (let i = 0; i < num; i++) { const text = arrText.substr(0 + i * 300, 300); // 全文分成多个300字的段落 setTimeout(() => { this.openVoice(text); }, time * 1000 * i); // 每隔1分17秒读一段 } } }, openVoice(content) { let _this = this; console.log(plugin); plugin.textToSpeech({ lang: 'zh_CN', tts: true, content, success: function (res) { console.log('succ tts', res.filename); _this.yuyinPlay(res.filename); }, fail: function (res) { console.log('fail tts', res); }, complete: function (res) { console.log('complete tts', res); } }); }, yuyinPlay(src) { if (!src) return; innerAudioContext.autoplay = true; innerAudioContext.src = src; // 设置音频地址 innerAudioContext.play(); // 播放音频 } } }; </script>
上一篇: pyttsx3 和 win32com.client 代替了发言者的声音
下一篇: SKEP模型
推荐阅读
-
微信小程序网络视图与小程序通信
-
开发微信小程序,提供一站式体育服务
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
安卓应用程序跳转至微信
-
微信小程序现场认证
-
微信公众号--小程序实现人脸核身(人脸识别)
-
微信小程序 - 智能对话开发
-
如何转发微信聊天语音?简单易懂,快速掌握
-
微信 smali 反编译语音消息转发功能
-
将微信语音信息 amr 文件转换为 WAV