整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
切圖網一個客戶項目中，用到了背景音樂，采用了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 theuser 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:
| 瀏覽器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
音頻格式的MIME類型
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/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);
}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
