Heim > Artikel > Web-Frontend > Wie verwende ich den HTML5-Audio-Tag? Beispiel für einen HTML5-Autoplay-Implementierungscode

Wie verwende ich den HTML5-Audio-Tag? Beispiel für einen HTML5-Autoplay-Implementierungscode

寻∝梦Original: 2018-08-20 14:14:4517126Durchsuche

Wie verwende ich den HTML5-Audio-Tag? Tutorial zur automatischen Wiedergabe und Verwendung von HTML5-Audio-Tags Beginnen wir mit unserer Artikeleinführung, die hauptsächlich die Verwendung von HTML5-Audio-Tags sowie detaillierte Tutorials zur automatischen Wiedergabe und Pause von HTML5-Audio-Tags vorstellt

HTML5-Audio-Tags Definition der Verwendung:

Beispiel für ein HTML5-Audio-Tag

Ein einfaches HTML 5-Audio:

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

Attribute des HTML5-Audio-Tags:

Wie verwende ich den HTML5-Audio-Tag? Beispiel für einen HTML5-Autoplay-Implementierungscode

Ein Tutorial zur Verwendung des HTML5-Audio-Tags

HTML5-Audio-Tag wird automatisch abgespielt und angehalten

Dies ist eine H5-Aktivitätsseite für WeChat auf der mobilen Seite. Eine der Voraussetzungen ist, dass die Hintergrundmusik nach dem Öffnen der Seite automatisch abgespielt wird. Klicken Sie auf die Schaltfläche mit dem Musiksymbol, um die Wiedergabe zu steuern und anzuhalten.

Auf der mobilen Seite ist für die Musikwiedergabe, automatische Wiedergabe und Pause das Audio-Tag erforderlich, also fangen Sie einfach an zu schreiben:

<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>

Wie verwende ich den HTML5-Audio-Tag? Beispiel für einen HTML5-Autoplay-Implementierungscode

Simulieren Sie im Chrome-Browser, klicken Sie auf den kleinen Lautsprecher, Sie können das Audio-Tag synchron steuern, um es abzuspielen und anzuhalten, und es kann auch automatisch abgespielt werden.

Also habe ich es auf meinem Handy getestet und das Ergebnis erhalten. . . . .

Auf dem Android-Telefon ist alles normal;

Aber auf dem Apple-Telefon kann es nicht automatisch abgespielt werden, wenn Sie die Seite zum ersten Mal aufrufen

Nachdem ich viele Informationen überprüft habe, habe ich Ich habe herausgefunden, dass dies daran liegt, dass Apple die automatische Wiedergabe von Audio verbietet, es sei denn, der Benutzer löst sie aktiv aus, um zu verhindern, dass sich der Benutzer in einer Verkehrsumgebung befindet, was zu Verkehrsdiebstahl führt. Natürlich gibt es immer noch Möglichkeiten, die Nachfrage zu befriedigen. Schließlich wird es unter dem WeChat-Browser eines anderen ausgeführt. Die Leute müssen den Kopf senken, wenn sie unter der Traufe sind.

Eine weitere in WeChat eingeführte Entwickler-JS-Datei ist wie folgt: jq und natives Schreiben

<!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>

Der Unterschied zwischen HTML 4.01 und HTML 5

Tipps und Hinweise

Tipp: Sie können Textinhalte zwischen dem Start-Tag und dem End-Tag platzieren, sodass ältere Browser eine Meldung anzeigen können, dass das Tag nicht unterstützt wird.

[Verwandte Empfehlungen]

Welche Rolle spielt der HTML-Pre-Tag? Detaillierte Erläuterung der Verwendung des HTML-Pre-Tags und seiner Attribute

Wofür wird das HTML-Li-Tag verwendet? Einführung in die Verwendung und Attribute des HTML-Li-Tags

Das obige ist der detaillierte Inhalt vonWie verwende ich den HTML5-Audio-Tag? Beispiel für einen HTML5-Autoplay-Implementierungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie passt sich die mobile HTML5-Seite an den Bildschirm an? Vier Möglichkeiten, HTML5-Seiten an Mobiltelefonbildschirme anzupassenNächster Artikel：Wie passt sich die mobile HTML5-Seite an den Bildschirm an? Vier Möglichkeiten, HTML5-Seiten an Mobiltelefonbildschirme anzupassen

In Verbindung stehende Artikel

Mehr sehen