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

2018/10/16 14:17:41 58 梦影雾花

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

    


阅读延展
评论列表
新浪微博
微信