html5 audio標籤怎麼用？ html5 自動播放實現程式碼實例-H5教程-PHP中文網

首頁

web前端

H5教程

html5 audio標籤怎麼用？ html5 自動播放實現程式碼實例

寻∝梦

Aug 20, 2018 pm 02:14 PM

audiohtml5

html5 audio標籤怎麼用？ html5 audio標籤自動播放和使用教學,下面開始我們的文章介紹，主要介紹了html5 audio標籤的使用，還有關於html5 audio標籤自動播放和暫停的教程詳解

html5 audio標籤用法的定義：

html5 audio標籤實例

一段簡單的HTML 5 音訊：

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

html5 audio標籤的屬性：

html5 audio標籤怎麼用？ html5 自動播放實現程式碼實例

來個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 = $(&#39;.icon-music-outer&#39;);  
    var $forbid = $music.find(&#39;.forbid&#39;);  
    var audio = document.getElementById(&#39;bgMusic&#39;);  
      $music.on(&#39;click&#39;, function () {  
        if ($forbid.hasClass(&#39;icon-music&#39;)) {  
            $forbid.removeClass(&#39;icon-music&#39;).addClass(&#39;icon-forbidMusic&#39;);  
        } else {  
            $forbid.removeClass(&#39;icon-forbidMusic&#39;).addClass(&#39;icon-music&#39;);  
        }  
  
        if (audio.paused) {  
            audio.play();  
            return  
        }  
        audio.pause();  
    });  
</script>  
</code>

html5 audio標籤怎麼用？ html5 自動播放實現程式碼實例

##在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 = $(&#39;.icon-music-outer&#39;);
    var $forbid = $music.find(&#39;.forbid&#39;);
    var audio = document.getElementById(&#39;bgMusic&#39;);
    function audioAutoPlay(audio) {
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
        document.addEventListener(&#39;YixinJSBridgeReady&#39;, function () {
            audio.play();
        }, false);
    }
     audioAutoPlay(audio);
     $music.on(&#39;click&#39;, function () {
        if ($forbid.hasClass(&#39;icon-music&#39;)) {
            $forbid.removeClass(&#39;icon-music&#39;).addClass(&#39;icon-forbidMusic&#39;);
        } else {
            $forbid.removeClass(&#39;icon-forbidMusic&#39;).addClass(&#39;icon-music&#39;);
        }
         if (audio.paused) {
            audio.play();
            return
        }
        audio.pause();
    });
</script>
</body>
</html>

HTML 4.01 與HTML 5 之間的差異

以上是html5 audio標籤怎麼用？ html5 自動播放實現程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee