声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放,也就是说 <audio autopaly> <video autoplay>在桌面版浏览器也将失效。
为什么会禁用这个功能呢?大佬认为用户体验不好吧。在safri on ios里面,明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的action就播放的话就会被safri拦截。那么现在你是不是已经想到了解决办法了呢,下面给出博主的解决方法。
html代码
<audio id="myAudio" controls="controls" autoplay="autoplay"> <source src="./HappyBirthday.mp3" /> Your browser does not support the audio element. </audio>
友情提示:加入多个source标签并不是顺序播放的,而是浏览器会选择一个支持的音频格式进行加载。在下面的js中,博主也给出了让audio顺序播放的办法。
js代码
$(function(){ document.addEventListener("click",play); var audio=$("#myAudio")[0]; //用户触发点击操作即可播放 function play(){ document.removeEventListener("click",play); audio.play(); //切换歌曲 audio.addEventListener("ended", switchMusic); } //切换歌曲 function switchMusic() { audio.src="./zhu.mp3"; audio.loop=true; audio.removeEventListener("ended", switchMusic); } });