uniapp 语音播报

uniapp 语音播报存在实例没有销毁的漏洞，故采用嵌入 h5 的解决方案。
方案一：以下是 h5 基于百度 tts -实现文字转语音的代码

<!DOCTYPE html>
<html>
  <head>
    <title>文本转语音测试</title>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <body>
    <div id="app">
      <button @click="playAudio()">播报</button>
      <audio
        style="display: none; width: 100%"
        id="tts_autio_id"
        autoplay="autoplay"
        controls="controls"></audio>
    </div>
    <script type="text/javascript">
      var app = new Vue({
        el: "#app",
        data: {
            url: null,
        },
        methods: {
          playAudio() {
            this.url =
              "http://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=1&pdt=301&per=0&spd=5&pit=5&vol=5&tex=测试&aue=3";
            document
              .getElementById("tts_autio_id")
              .setAttribute("src", this.url);
            document.getElementById("tts_autio_id").play();
          },
        },
      });
    </script>
  </body>
</html>

方案二：h5 中新增的 api - SpeechSynthesisUtterance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>百度语音播报</title>
  </head>
  <body>
    <button onclick="speckText(90);">语音播报</button>
    <script>
      function speckText(str) {
        var msg = new SpeechSynthesisUtterance(str);
        console.log(window.speechSynthesis.getVoices());
        window.speechSynthesis.speak(msg);
      }
    </script>
  </body>
</html>

拓展
基于百度tts-实现文字转语音，支持下载，在线预览
 JS实现文字转语音播放
 SpeechSynthesisUtterance 语音合成使用

uniapp 问题总结

uniapp 语音播报