微信小程序实现长文本分段播放

接上篇微信小程序实现语音合成功能解决腾讯智能语音插件中文最大支持100个汉字的问题

场景：需要合成100汉字以上的文本进行语音播报

注意：本文示例代码是在上篇基础上进行改进。

上代码

<scriprt>
// 创建音频组件
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;
innerAudioContext.src = '';
// 音频播放方法
play(id){var that = this;if(that.oldId == id && that.currentTime > 0){// 控制是否是当前已经播报过，现在处于暂停的文章//暂停之后点击播放继续播放innerAudioContext.play();innerAudioContext.onEnded((res) => {})}else{//新文章var extras = that.content;// 要播报的文本var lastExtras;// 提取汉字(由于笔者要播报的来自富文本，所以需要提取文字)if(extras != null && extras != ''){// 去掉html标签lastExtras = extras.replace(/<[^>]+>/g,"");// 只留汉字和数字lastExtras = lastExtras.replace(/[^\u4e00-\u9fa5_0-9]/gi,"");}// 定义每次截取长度var fixedLength = 80;// 是否继续读取文章标识var readFlag = true;// 定义循环因子var i = 0;while(readFlag){// 循环播报文本let voiceText = lastExtras.substr(i*fixedLength,fixedLength);i++;if(voiceText.length <= 0){readFlag = false;}}for (let j = 0; j < i; j++) {const voiceText = lastExtras.substr((0+j)*fixedLength,fixedLength);setTimeout(()=>{that.voiceHC(j,voiceText);console.log('第'+j+'次进入播报')},75*250*j)// 延时时间需要自己估算。读者朋友们可以自行调整}}that.oldId = id;},voiceHC(i,lastExtras){console.log('第'+i+'次调用，内容：'+lastExtras);var encoded = encodeURI(lastExtras);plugin.textToSpeech({content: lastExtras,speed: 0,volume: 0,voiceType: 0,language: 1,projectId: 0,sampleRate: 16000,success: function(data) {let url = data.result.filePath;if(url && url.length > 0){innerAudioContext.autoplay = true;innerAudioContext.src = url;innerAudioContext.onPlay(() => {});innerAudioContext.onError((res) => {console.log(res.errMsg)});}},fail: function(error){console.log(error);}})}
</script>

微信小程序实现长文本分段播放相关推荐

解决微信小程序rich-text 长文本不换行问题解决
解决: 给rich-text 加class 之后添加样式. //wxml<rich-text class="hh" nodes="{{nodes}}"&g ...
微信小程序音频相关问题：播放，录音等相关
其实我也知道音频问题,十分尴尬,可以参考的资料极少,研究者也不多,所处的教程也基本是基础的内容,稍微深入几乎一篇都没有:所以前段时间我就准备弄的东西,一直没弄,因为没资料去弄,但是今天,看到一个同学遇 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
小程序PHP字体,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
微信小程序 view的文本自动换行了的问题（scroll-view）/微信小程序 view换行跟不换行的解决方案
今天在写一个滚动导航栏的时候发现 view的文本自动换行了,用了display:flex;flex-warp:nowarp;也不管用, wxml: {{item}} wxss: .top{ width ...
微信小程序练手项目-音乐播放器
微信小程序练手项目-音乐播放器该项目只适合练手,大佬请绕道项目展示图: 项目介绍微信小程序音乐播放器页面: 音乐推荐.播放器.播放列表功能: 播放.暂停.上一首.下一首.跳转播放列表.实时进 ...
微信小程序账号长时间未登录冻结解封
微信小程序账号长时间未登录冻结解封 1.账号找回链接[官方]:http://mp.weixin.qq.com/acct/findacct?action=scan 2.按照官方指引的三个操作步骤进操作, ...
微信小程序页面传值文本解密问题
微信小程序页面传值文本解密问题遇到问题最近在做小程序,遇到这样一个需求: 将百度的Ueditor编辑器存入的文本数据显示在小程序中,需要保留之前的样式,这就用到了 WxParse插件,它能够用解 ...

微信小程序实现长文本分段播放

微信小程序实现长文本分段播放

微信小程序实现长文本分段播放相关推荐

最新文章

热门文章