切圖網(wǎng)一個(gè)客戶項(xiàng)目中，用到了背景音樂，采用了html5 audio標(biāo)簽， 并且設(shè)置了 autoplay 自動(dòng)播放，在PC上正常，但是一到手機(jī)下就無法自動(dòng)播放。

即便使用JS ,調(diào)用audio 對(duì)象的播放方法 play() 也不能自動(dòng)播放！ 這是為什么呢？

于是打破砂鍋問到底的決心，做了好多種demo，例子

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

測(cè)試，蘋果、安卓還是不行，最后發(fā)現(xiàn)真相的我，眼淚掉下來 。 原因在這：

為了防止不必要的自動(dòng)播放浪費(fèi)流量，手機(jī)網(wǎng)頁訪問帶有audio的頁面是不會(huì)自動(dòng)播放的。

Safari屏蔽了autoplay，必須由用戶交互事件觸發(fā)，因?yàn)閍utoplay在移動(dòng)網(wǎng)絡(luò)環(huán)境下可能會(huì)造成用戶流量費(fèi)劇增

下面是引自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 提供了播放音頻文件的標(biāo)準(zhǔn)。

互聯(lián)網(wǎng)上的音頻

直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)。

今天，大多數(shù)音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。

HTML5 規(guī)定了在網(wǎng)頁上嵌入音頻元素的標(biāo)準(zhǔn)，即使用 <audio> 元素。

瀏覽器支持

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

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

HTML5 Audio - 如何工作

如需在 HTML5 中播放音頻，你需要使用以下代碼：

實(shí)例

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

control 屬性供添加播放、暫停和音量控件。

在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。

<audio> 元素允許使用多個(gè) <source> 元素. <source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個(gè)支持的音頻文件

音頻格式及瀏覽器支持

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

音頻格式的MIME類型

HTML5 Audio 標(biāo)簽

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在HTML5得到了廣泛的應(yīng)用不管是在微信還是在app中，特別是在微信開發(fā)中通常會(huì)遇到要實(shí)現(xiàn)音頻或者視頻的播放功能，如背景音樂，視頻介紹等。如何實(shí)現(xiàn)自動(dòng)播放功能呢？純的H5頁面在手機(jī)端中是無法實(shí)現(xiàn)自動(dòng)播放的，移動(dòng)端瀏覽器大部分是禁用video和audio的autoplay功能而且很多移動(dòng)瀏覽器也不支持首次js調(diào)用play方法進(jìn)行播放，只有用戶手動(dòng)點(diǎn)擊了播放后暫停，然后用代碼進(jìn)行play就可以。這樣做主要是為了防止一些不必要的自動(dòng)播放浪費(fèi)流量。

下面的代碼是實(shí)現(xiàn)用戶第一次觸摸后實(shí)現(xiàn)的播放和微信app下的自動(dòng)播放：

function autoPlay() {

/* 自動(dòng)播放效果，解決瀏覽器或者APP自動(dòng)播放問題 */

function browserHandler() {

startPlay(true);

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

}

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

/* 自動(dòng)播放效果，解決微信自動(dòng)播放問題 */

function weixinHandler() {

startPlay(true);

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

startPlay(true);

}, false);

document.removeEventListener('DOMContentLoaded', weixinHandler);

}

document.addEventListener('DOMContentLoaded', weixinHandler);

}