音频合成（H5自带播放声音与TTS播放）

最新推荐文章于 2024-06-06 18:23:36 发布

′负重前行

最新推荐文章于 2024-06-06 18:23:36 发布

阅读量1.2k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34734073/article/details/108262226

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近项目要用到声音播放，当有新订单时要播放订单价格，有新发票有播放声音。
那时就找到了H5的speechSynthesis和TTS，
之后因为某种需求，自己做了用N个audio标签来做了订单价格的播放。。。（崩溃~）
以下只是简单例子，供参考

H5的speechSynthesis：
例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>admin-vue</title>
  </head>
  <body>
          <input type="text" id='val' value="99.99" placeholder='你要转换的文字'>
          <button id="btn" >提交</button>
    <script type="text/javascript">
      var btn = document.getElementById("btn");
      var speechSU = new window.SpeechSynthesisUtterance();
      btn.onclick =  function()
        {
            var val=document.getElementById("val").value;
            speechSU.text = val;
            window.speechSynthesis.speak(speechSU);
        }
    </script>
  </body>
</html>

百度TTS语音合成：
https://ai.baidu.com/ai-doc/SPEECH/Gk38y8lzk
例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>admin-vue</title>
  </head>
  <body>
          <input type="text" id='val' value="99.99" placeholder='你要转换的文字'>
          <button id="btn" >提交</button>
    <script type="text/javascript">
      var btn = document.getElementById("btn");
      var speechSU = new window.SpeechSynthesisUtterance();
      btn.onclick =  function()
        {
            var val=document.getElementById("val").value;
            var zhText =encodeURI(val);
            document.write("<audio autoplay=\"autoplay\">");
            document.write("<source src=\"http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=3&text="+ zhText +"\" type=\"audio/mpeg\">");
            document.write("<embed height=\"0\" width=\"0\" src=\"http://tts.baidu.com/text2audio?lan=en&ie=UTF-8&spd=2&text="+ zhText +"\">");
            document.write("</audio>");
        }
    </script>
  </body>
</html>

′负重前行

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
音频合成（H5自带播放声音与TTS播放）

最近项目要用到声音播放，当有新订单时要播放订单价格，有新发票有播放声音。那时就找到了H5的speechSynthesis和TTS，之后因为某种需求，自己做了用N个audio标签来做了订单价格的播放。。。（崩溃~）以下只是简单例子，供参考H5的speechSynthesis：例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport
复制链接

扫一扫

专栏目录