vue自定义文字转播放语音 兼容谷歌

网上看了几种方法都不兼容谷歌 例如：SpeechSynthesisUtterance 方法
这里是调用 百度接口

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=播放文字内容

接口参数说明：

lan=zh：语言是中文，如果改为lan=en，则语言是英文。

ie=UTF-8：文字格式。

spd=2：语速，可以是1-9的数字，数字越大，语速越快。

text=**：这个就是你要转换的文字。

html / template ：

 <span style="margin-left: 10px;" @click="doTTS">播放</span>
 
    <div v-show="false">
      <audio id="autio-id" autoplay="autoplay">
        <source
          src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=3&text=您好，您有新的告警信息产生啦"
          type="audio/mpeg"
        />
        <embed height="0" width="0" src="" />
      </audio>
    </div>

js ：

  methods: {
   //调用方法
    doTTS() {
       let ttsAudio = document.getElementById("autio-id");
       ttsAudio.play();
    }
  }

优化！

 <span style="margin-left: 10px;" @click="doTTS('内容已被修改')">播放</span>

export default {
  data() {
    return {
      srcVal:
        "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=3&text=您好，您有新的告警信息产生啦"
    };
  },

  methods: {
    doTTS(val) {
      this.srcVal = `http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=3&text=${val}`;
      let audio = new Audio();
      audio.src = this.srcVal;
      audio.play();
    }
  }

亲测 谷歌有效~