audio音频兼容性问题小结

我在页面上放一个<audio loop="loop" src="flash/music.mp3" id="media" autoplay></audio>结果苹果微信端、苹果safari、UC浏览器都无法播放，我的华为荣耀8微信及内置浏览器均可播放！

首先给微信浏览器做兼容处理：

audioAutoPlay('media');
function audioAutoPlay(id){
	var audio = document.getElementById(id);
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        audio.play();
    }, false);
}

但是苹果safari和UC浏览器还是无法播放，经查阅官方文档不允许audio自动播放，即使有autoplay也没有作用，被强制禁用了！必须用户主动交互(例如 click)后才能播放 audio。

由于我给了音频（停止/播放）同步的按钮（停止/旋转），

<div id="audio_btn" class="video_exist" style="display: block;">
    <audio loop="loop" src="flash/music.mp3" id="media" autoplay></audio>
</div>

因此我们可以监听音频的播放状态来判断音乐按钮是否添加旋转样式。

/*监听音乐是否播放*/
$("#media").get(0).addEventListener("play",function() {
    $("#audio_btn").addClass("rotate");
});

这样当监测到音频不能播放时，按钮没有旋转，通过用户点击按钮来实现音频的播放：

//音乐控制按钮（播放/暂停）
$("#audio_btn").click(function() {

    if ($("#media").get(0).paused) {
        $("#media").get(0).play();
        $(this).addClass("rotate");
    } else {
        $("#media").get(0).pause();
        $(this).removeClass("rotate");
    }
})

旋转样式：

@-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
@keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@-moz-keyframes rotating{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}
.rotate {
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
}

audio音频兼容性问题小结

猜你喜欢