整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

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

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

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

http://m.slicy.cn/bg-music.html

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

为了防止不必要的自动播放浪费流量,手机网页访问带有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.

TML5 提供了播放音频文件的标准。

互联网上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

HTML5 Audio - 如何工作

如需在 HTML5 中播放音频,你需要使用以下代码:

实例

<audiocontrols><sourcesrc="horse.ogg"type="audio/ogg"><sourcesrc="horse.mp3"type="audio/mpeg">您的浏览器不支持 audio 元素。</audio>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件

音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

浏览器MP3WavOgg
Internet Explorer 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+YESYESYES
Safari 5+YESYESNO
Opera 10+YESYESYES

音频格式的MIME类型

FormatMIME-type
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

HTML5 Audio 标签

标签描述
<audio>定义了声音内容
<source>规定了多媒体资源, 可以是多个,在 <video> 与 <audio>标签中使用

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

在HTML5得到了广泛的应用不管是在微信还是在app中,特别是在微信开发中通常会遇到要实现音频或者视频的播放功能,如背景音乐,视频介绍等。如何实现自动播放功能呢?纯的H5页面在手机端中是无法实现自动播放的,移动端浏览器大部分是禁用video和audio的autoplay功能而且很多移动浏览器也不支持首次js调用play方法进行播放,只有用户手动点击了播放后暂停,然后用代码进行play就可以。这样做主要是为了防止一些不必要的自动播放浪费流量。

下面的代码是实现用户第一次触摸后实现的播放和微信app下的自动播放:

function autoPlay() {

/* 自动播放效果,解决浏览器或者APP自动播放问题 */

function browserHandler() {

startPlay(true);

document.body.removeEventListener('touchstart', browserHandler);

}

document.body.addEventListener('touchstart', browserHandler);

/* 自动播放效果,解决微信自动播放问题 */

function weixinHandler() {

startPlay(true);

document.addEventListener("WeixinJSBridgeReady", function () {

startPlay(true);

}, false);

document.removeEventListener('DOMContentLoaded', weixinHandler);

}

document.addEventListener('DOMContentLoaded', weixinHandler);

}