html的video,audio标签有autoplay属性,autoplay 属性规定一旦音频就绪马上开始播放。如果设置了该属性,音频将自动播放。
但是,目前各主流浏览器为了用户体验,都禁止默认自动播放音视频了。需要有交互操作才能播放。没有交互操作,浏览器会报错,给出如下提示:
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
网上提到的一些解决方法,比如window.open, iframe,AudioContext等方式都行不通了。必须得有交互操作。
为了更好的体验,我们可能想到最好让用户无感知。之前有想到用鼠标移动等事件去触发Audio的交互,从而达到后续通过js来操作播放。
监听网页的onmousemove事件,先把audio暂停,再通过js业务逻辑去操控音频的播放。
经过一番实践后,发现鼠标移动事件不行,得点击才醒。看来打擦边球行不通。
Chrome对video给了最佳实践方法,先默认静音,静音的视频文件是可以自动播放的,当用点击video控件上的音量开关后,就可以播放声音,后续也可以通过js去控制了。一些视频网站,APP也是这么做的。
处理音频的自动播放貌似也只能先让用户有点击操作了。我们可以监听网页的点击事件,不管用户点击了哪里,只要有点击操作,就可以控制audio,就能通过js去操作audio的播放暂停了。但这样也不靠谱,在业务需求下,某些情况下用户可能就是不做点击操作,那就无法播放音频了。
如果有前置条件能确保用户在页面上一定有交互操作,那我们可以在此入手,获取audio的播放控制权,让用户无感知操作就能自动播放音频了。如果不能保证,那只能再进一步,我们最终还得从交互上着手,给用户操作或提示界面,让用户主动去点击页面。
例如,在页面上展示一个静音按钮,提示用户当前音频是静音,暂停播放的,如果需要播放,需要点击播放按钮。
<audio id="player" controls src="./mp3/ding.mp3"></audio>
<script>
let $player = document.getElementById('player');
document.documentElement.onclick = function(){
console.log(window.audioautoplay);
if(!window.audioautoplay){
window.audioautoplay = true;
$player.play();
}
}
let No = '12345';
let audios = No.split('').map(v=>{
return `./mp3/${v}.mp3`;
})
let index = 0;
function playOrder(){
console.log(window.audioautoplay);
$player.onended = ()=>{
index += 1;
if(index < audios.length){
playOrder();
}else{
index = 0;
audios = [];
}
}
$player.src = audios[index];
$player.play();
}
setTimeout(playOrder, 5000);
</script>