Web-Frontend
H5-Tutorial
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
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:
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="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>
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 = $('.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>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]
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
Klipsch stellt die Flaggschiff-Soundbar Flexus Core 300 mit 8K-Unterstützung, 12 Lautsprechern und Raumkorrektur vor
Sep 05, 2024 am 10:16 AM
Der Klipsch Flexus Core 300 ist das Topmodell der Serie und positioniert sich über dem bereits verfügbaren Flexus Core 200 im Soundbar-Sortiment des Unternehmens. Laut Klipsch handelt es sich um die erste Soundbar der Welt, deren Klang sich an die Anforderungen anpassen lässt
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
