龙空技术网

html5背景音乐不自动播放解密(原创)

切图网 685

前言:

如今看官们对“网页播放音乐js”大概比较讲究,各位老铁们都想要知道一些“网页播放音乐js”的相关资讯。那么小编在网络上收集了一些对于“网页播放音乐js””的相关资讯,希望咱们能喜欢,小伙伴们一起来学习一下吧!

在切图网一个客户项目中,用到了背景音乐,采用了html5 audio标签, 并且设置了 autoplay 自动播放,在PC上正常,但是一到手机下就无法自动播放。

即便使用JS ,调用audio 对象的播放方法 play() 也不能自动播放! 这是为什么呢?

于是打破砂锅问到底的决心,做了好多种demo,例子

测试,苹果、安卓还是不行,最后发现真相的我,眼泪掉下来 。 原因在这:

为了防止不必要的自动播放浪费流量,手机网页访问带有audio的页面是不会自动播放的。

Safari屏蔽了autoplay,必须由用户交互事件触发,因为autoplay在移动网络环境下可能会造成用户流量费剧增

下面是引自Safari Reference

In Safari on iPhone OS (for all devices, including iPad), where the

user may be on a cellular network and be charged per data unit,

autobuffering and autoplay are disabled. No data is loaded until the

user initiates it. This means the JavaScript play() and load() methods

are also inactive until the user initiates playback, unless the play()

method is triggered by user action.

标签: #网页播放音乐js