html5 audio標籤用法的定義：
<audio> 標籤定義聲音，比如音樂或其他音頻流。
html5 audio標籤執行個體
一段簡單的 HTML 5 音頻：
<audio src="someaudio.wav">您的瀏覽器不支援 audio 標籤。</audio>
html5 audio標籤的屬性：
來個html5 audio標籤的使用執行個體教程
html5 audio標籤自動播放和暫停
這有一個移動端的的H5活動頁面，其中有個需求是：開啟頁面後背景音樂就要自動開始播放，點擊音樂表徵圖按鈕可以控制其播放與暫停。
移動端，音樂播放，自動播放與暫停，audio標籤是必須的，於是直接就開寫：
<code class="language-html"><i class="icon-music-outer"> <i class="forbid icon-music"></i> <audio loop autoplay="autoplay" controls id="bgMusic" src="./music/musicMin.mp3"> </audio> </i> <script> var $music = $('.icon-music-outer'); var $forbid = $music.find('.forbid'); var audio = document.getElementById('bgMusic'); $music.on('click', function () { if ($forbid.hasClass('icon-music')) { $forbid.removeClass('icon-music').addClass('icon-forbidMusic'); } else { $forbid.removeClass('icon-forbidMusic').addClass('icon-music'); } if (audio.paused) { audio.play(); return } audio.pause(); }); </script> </code>
在chorme瀏覽器上類比，點擊小喇叭，可以同步操控audio標籤進行播放與暫停，也能自動播放。
於是放到手機上實測一番，結果。。。。。
安卓手機上一切正常；
但是在蘋果手機上，剛進入頁面的時候是不能自動播放的
後來查了許多資料後才知道，這是因為蘋果為了防止使用者是在流量環境下，這樣會導致流量的偷跑，所以禁止了audio的自動播放，除非使用者主動觸發。當然，還是有辦法達到需求的，畢竟是在人家瀏覽器下跑起來的，人在屋簷下，不得不低頭啊！
再一個引入的開發人員js檔案，整體寫法如下：jq和原生寫法
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/icon.css" type="text/css"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <style> .icon-music-outer{ display: inline-block; width: 25px; height: 25px; position: fixed; right: 5px; top: 10px; font-size: 25px; color: #ffda51; z-index: 100; } .forbid{ display: inline-block; font-size: 25px; width: 25px; height: 25px; } .icon-forbidMusic{ display: inline-block; font-size: 25px; width: 25px; height: 25px; color: #d0f2fc; z-index: 101; } audio{ position: absolute; left: -300px; } </style></head><body><i class="icon-music-outer"> <i class="forbid icon-music"></i> <!--控制音樂表徵圖--> <audio loop autoplay="autoplay" controls id="bgMusic" src="./music/musicMin.mp3"> </audio></i><script src="./js/jquery-3.1.0.min.js" type="text/javascript"></script><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script> var $music = $('.icon-music-outer'); var $forbid = $music.find('.forbid'); var audio = document.getElementById('bgMusic'); function audioAutoPlay(audio) { document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.play(); }, false); } audioAutoPlay(audio); $music.on('click', function () { if ($forbid.hasClass('icon-music')) { $forbid.removeClass('icon-music').addClass('icon-forbidMusic'); } else { $forbid.removeClass('icon-forbidMusic').addClass('icon-music'); } if (audio.paused) { audio.play(); return } audio.pause(); });</script></body></html>
HTML 4.01 與 HTML 5 之間的差異
<audio> 標籤是 HTML 5 的新標籤。
提示和注釋
提示：可以在開始標籤和結束標籤之間放置常值內容，這樣老的瀏覽器就可以顯示出不支援該標籤的資訊。
【相關推薦】
html pre標籤的作用是什嗎？html pre標籤用法及其屬性詳解
HTML li標籤是幹嘛的？HTML li標籤用法和屬性的介紹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
