首页站内杂志站内信息
文章内容页

分享一个封装的JS百度语音合成函数

  • 作者:雨祺
  • 来源: 原创
  • 发表于2024-09-23 13:19:53
  • 被阅读0
  • 分享一个封装的JS百度语音合成函数。摘自美文苑聊天室的语音提示(用户@通知,红包领取,签到,大转盘中奖,敏感词拦截等语音通知),不废话上代码
    1. function duanbaiduyuyin(fixedText){ 
    2. var content = fixedText.trim();   
    3. var audioId = 'audio' + Math.random().toString(36).substr(2, 9);  
    4. $('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>'); 
    这样调用就可以了
    1. duanbaiduyuyin('你需要合成的文字内容'
    PS:上面有字数限制,请勿用于长文本一次性语音合成。反之参照美文苑即时通讯聊天室的JS。该JS已经包括了下面如果的所有条件写法。

    如果还需要更高级别的,比如用自己整合的百度语音合成接口返回的二进制音乐文件转成blob播放,或者是按文章内容的P标签分割进行循环语音合成播放,或者是按字数多少分割进行播放等,就重点阅读PS后面的内容。
    per代表发音人,vol代表音量

    既然上首页就在补充一下,超过1024字符按多少字数分割再进行语音合成。代码如下:
    1. function baiduyuyin(element) { 
    2. var bubbleDiv = element.closest('.bubble.you'); 
    3. if (bubbleDiv) { 
    4. var content = bubbleDiv.textContent.trim();    
    5. var chunks = []; 
    6. for (var i = 0; i < content.length; i += 500) { 
    7. chunks.push(content.substr(i, 500)); 
    8. chunks.forEach(function(chunk, index) { 
    9. $('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>'); 
    10. }); 
    函数里面的bubble.you是我聊天室的某用户的聊天文字内容dom,如果是文章内容,请把dom元素名改成你自己的。另外此函数是按500字进行分割分段循环语音合成。还需要用自己的百度语音api接口返回二进制的再处理为blob的。请参考美文苑即时通讯聊天室的JS代码。美文苑聊天室地址:https://www.meiweny.cn/e/extend/chat/
     
    【审核人:站长】

        标题:分享一个封装的JS百度语音合成函数

        本文链接:https://www.meiweny.cn/zazhi/fenleixinxi/1132.html

        赞一下

        深度阅读

        • 您也可以注册成为美文苑的作者,发表您的原创作品、分享您的心情!

        阅读记录

          关注美文苑