问题分析
首先我遇到这个问题的情况是:用户刷卡播报音频,一卡一刷,报声音是没毛病,
但是如果刷的太快,那么问题就来了,上一个用户的播报还没结束,这一个播报就要覆盖上来了
系统会咋整?报错呗!
原理很简单,前一个语音请求被下一个请求打断了呗,js肯定是听最新的命令撒。
有问题咱就解决呗
解决方案
首先我想到的是阻止新命令来覆盖,一定要等上一条命令结束了再让下一条来执行。
所以在我们之前的播放音频的位置加上一个判断
修改前:
var audio = document.getElementById("audioPlay");
audio.play();//播放音频
修改后:
var audio = document.getElementById("audioPlay");
//audio.play();
playPromise = audio.play();
if (playPromise) {
playPromise.then(() => {
// 音频加载成功
// 音频的播放需要耗时
setTimeout(() => {
// 后续操作
console.log("done");
}, audio.duration * 1000); // audio.duration 为音频的时长单位为秒
}).catch((e) => {
console.log("Operation is too fast, audio play fails");
});
}
大功告成!