场景:
当vue开发web端系统的时候,想播放一些自定义音频。例如播放一些系统信息的时候,就可以使用这个原生的能力。不局限于播放mp3等格式的固定音频。
注意:浏览器有限制,需要点击一下界面,或者说界面有点击操作,才会触发语音播放,默认进来不点击界面,无论怎么自动调用都是不起效的
代码实现:
//播放操作
playAudio(){
//没开声音就不再播放
if(window.localStorage.volume!='true')return
//初始化一次
let to_speak = new SpeechSynthesisUtterance();
to_speak.voiceURI = 'Google 普通话(中国大陆)';
to_speak.rate = 1;
to_speak.volume = 100
to_speak.text = '的升级附加赛速度和加速度仅仅是'
//播放语音
window.speechSynthesis.speak(to_speak);
// console.log('这个呀',to_speak)
},
touchClick(){
//切换声音开关
//关闭 就cancel这个队列
//打开 就正常执行
new Promise((r)=>{
this.volume = !this.volume
r()
}).then(()=>{
if(!this.volume){
//关闭就立即停止
window.speechSynthesis.cancel();
}
})
window.localStorage.volume = this.volume
},