分享一个封装的JS百度语音合成函数。摘自美文苑聊天室的语音提示(用户@通知,红包领取,签到,大转盘中奖,敏感词拦截等语音通知),不废话上代码
如果还需要更高级别的,比如用自己整合的百度语音合成接口返回的二进制音乐文件转成blob播放,或者是按文章内容的P标签分割进行循环语音合成播放,或者是按字数多少分割进行播放等,就重点阅读PS后面的内容。
per代表发音人,vol代表音量
既然上首页就在补充一下,超过1024字符按多少字数分割再进行语音合成。代码如下:
这样调用就可以了
- function duanbaiduyuyin(fixedText){
- var content = fixedText.trim();
- var audioId = 'audio' + Math.random().toString(36).substr(2, 9);
- $('body').append('<div><audio id="' + audioId + '" controls="controls" hidden="true" autoplay="autoplay"><source src="https://tts.baidu.com/text2audio?tex=' + content + '&cuid=dict&lan=ZH&ctp=2&pdt=30&vol=9&per=0" type="audio/mpeg"/></source></audio></div>');
PS:上面有字数限制,请勿用于长文本一次性语音合成。反之参照美文苑即时通讯聊天室的JS。该JS已经包括了下面如果的所有条件写法。
- duanbaiduyuyin('你需要合成的文字内容')
如果还需要更高级别的,比如用自己整合的百度语音合成接口返回的二进制音乐文件转成blob播放,或者是按文章内容的P标签分割进行循环语音合成播放,或者是按字数多少分割进行播放等,就重点阅读PS后面的内容。
per代表发音人,vol代表音量
既然上首页就在补充一下,超过1024字符按多少字数分割再进行语音合成。代码如下:
函数里面的bubble.you是我聊天室的某用户的聊天文字内容dom,如果是文章内容,请把dom元素名改成你自己的。另外此函数是按500字进行分割分段循环语音合成。还需要用自己的百度语音api接口返回二进制的再处理为blob的。请参考美文苑即时通讯聊天室的JS代码。美文苑聊天室地址:https://www.meiweny.cn/e/extend/chat/
- function baiduyuyin(element) {
- var bubbleDiv = element.closest('.bubble.you');
- if (bubbleDiv) {
- var content = bubbleDiv.textContent.trim();
- var chunks = [];
- for (var i = 0; i < content.length; i += 500) {
- chunks.push(content.substr(i, 500));
- }
- chunks.forEach(function(chunk, index) {
- $('body').append('<div><audio id="audio' + index + '" controls="controls" autoplay="autoplay" hidden="true"><source src="https://tts.baidu.com/text2audio?tex=' +encodeURIComponent(chunk)+ '&cuid=dict&lan=ZH&ctp=2&pdt=30&vol=9&per=0" type="audio/mpeg"/></source></audio></div>');
- });
- }
- }