我来跟你们聊聊H5视频怎么让背景音乐一开头就开始跑~现在的视频不光要有料还要好玩儿，背景音乐就是那个让气氛嗨起来的关键因素，所以它要怎么自己开跑？这个小细节可不能忽略！
一、音乐自动播放的基本原理
你用HTML5的话，可以利用‘autoplay’这个特性让音频自动播放出来。听着好像挺容易，但其实里面有些门道要注意。
二、浏览器兼容性问题
各种浏览器对于`autoplay`属性的理解不太一样，尤其在手机上，为了省流量和保护电池，大部分浏览器都默认不让音频自动播放。所以我们得想别的办法来解决这个问题。
三、移动端体验的挑战
移动设备，用户在哪儿都能拿出来用。如果音乐自己突然开始响了，可能就不大好了，无论是打扰到别人还是让自己感到不舒服。所以，怎么才能既让用户觉得方便又不会出现这种情况，这可是个得好好琢磨的问题。
四、我的实战经验
试过很多次，我发现加个自动播放的按钮在网页上，挺好用的。这么做，能让大家知道啥时候开始听歌，主动点下就行；而且，还少些打扰！
五、代码实现细节
搞起来简单得很！先把音频弄到HTML里头去，再用JavaScrip瞅准了页面加载完这事儿，等加载完了就可以让按钮点一下就能播歌。
六、苹果手机的特殊处理
var audio = document.getElementById('music1');
$("#btn").bind("touchstart", function bf() {
if(audio !== null) {
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//alert(audio.paused);
if(audio.paused) {
audio.play(); //audio.play();// 这个就是播放
$("#btn").addClass("active")
} else {
audio.pause(); // 这个就是暂停
$("#btn").removeClass("active")
}
}
})
用Apple手机放歌时，因为它的系统特别，只用直觉的`autoplay`不行。这时候要看用户怎么动手了，让音乐跳出来的时间恰到好处就行。
七、用户体验的重要性
搞定这个项目后，深感用户体验有多重要了。虽然实现自动播放也就那点儿事儿，但关键就是不能牺牲用户的浏览感受。考虑的每个小细节，不都是为了让大家看得更舒服！
八、总结与展望
实战让我加深了对H5视频背景音自动播功能的理解，虽然有挑战，但还是学到了好多东西。以后还会想要探究如何提高用户体验的新招式！
$("html").one('touchstart',function(){
audio.play();
})
结尾，来问问大家：你们做程序员以来，碰到过什么棘手事？是怎么解决滴？快来评论区唠嗑唠嗑！记得给这篇文章点个赞分享出去~
评论0