解决部分浏览器不支持audio自动播放

声音无法自动播放这个在 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);
    }		
});