浏览器语音播报和音乐播放

背景

接到需求，浏览器登录系统时，当新增订单时需语音播报一段话提示当前登录人。

当时考虑到的是播放一段录好的声音，自动播放，会出现不能自动播放；后查找资料发现网页语音api-SpeechSynthesis可以实现这个自动语音播报的功能。

实现方法一

采用audio标签

<audio src="./ds.mp3" id="myAudio" controls style="display: none">
    您的浏览器不支持 audio 标签。
</audio>

var audio = document.getElementById("myAudio");
audio.load();
audio.play();

谷歌浏览器报错

原因：当与当前页面没有进行交互时,比如用户刷新了页面后,audio的方法play()调用就会报错,如下图.查找了一些资料后,才知道原来是2018年4月份以后,chrome浏览器对这块进行了优化,为了节约流量,禁止了自动播放,必须由用户交互后才能触发

解决办法

需要在界面上设置一个开关，必须用户点击开关（相当于授权的操作）

<el-switch
    v-model="audioBtn"
    active-text="提示"
    inactive-text="不提示"
    change="getAudio">
</el-switch>
<audio src="./ds.mp3" id="myAudio" controls style="display: none">
    您的浏览器不支持 audio 标签。
</audio>

getAudio() {
    var audio = document.getElementById("myAudio");
    if (this.audioBtn) {
        audio.load();
        audio.play();
    }else {
        audio.pause()
    }
}

实现方法二

采用网页语音API：SpeechSynthesis

只需要2行代码就可以实现这个功能

let speech = new window.SpeechSynthesisUtterance('你好，我是自动语音播报api');
window.speechSynthesis.speak(speech);