HTML5 implementiert die automatische Wiedergabe von Hintergrundmusik

Autoplay-Attribut:

(Empfohlenes Tutorial: HTML5-Video-Tutorial)

<audio controls="controls" autoplay="autoplay">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

Das Autoplay-Attribut gibt an, dass die Audiowiedergabe beginnen soll, sobald sie fertig ist. Wenn diese Eigenschaft festgelegt ist, wird der Ton automatisch abgespielt.

Aber in tatsächlichen Anwendungen kommt es häufig vor, dass die automatische Wiedergabe nicht möglich ist, hauptsächlich weil einige Browser oder Mobiltelefone das Autoplay-Attribut blockieren oder nicht unterstützen. Hier werde ich die von mir verwendete Methode vorstellen.

Zuallererst: Der Code im HTML lautet wie folgt:

<audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>
<source src="music/bgmusic.mp3" />
</audio>
<!--这里是音乐-->
<img id="btn" class="active" src="img/music.png" alt="" />
<!--这里是一个可以控制背景音乐播放暂停的开关-->

Verwenden Sie den folgenden Code in der js-Datei:

var audio = document.getElementById('music1');
$("#btn").bind("touchstart", function bf() {
 
if(audio !== null) {
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//alert(audio.paused);
if(audio.paused) {
audio.play(); //audio.play();// 这个就是播放
$("#btn").addClass("active")
} else {
audio.pause(); // 这个就是暂停
$("#btn").removeClass("active")
}
}
})

Nachdem Sie ihn hier geschrieben haben, können die meisten Android-Telefone grundsätzlich die automatische Wiedergabe realisieren, Apple-Telefone jedoch immer noch nicht Tun Sie es zu diesem Zeitpunkt.

Hier habe ich eine Schaltfläche zum Hinzufügen zur Ladeseite verwendet. Wenn der Ladevorgang abgeschlossen ist, klicken Sie auf die Schaltfläche, um den Benutzer zum Abschließen der automatischen Wiedergabe der Hintergrundmusik zu führen Zu diesem Zeitpunkt ist die automatische Wiedergabe von Hintergrundmusik implementiert. Diese Methode ist anwendbar. Es gibt eine Ladeseite und Sie müssen klicken, um das h5-Projekt aufzurufen.

Verwandte Empfehlungen:

h5

Das obige ist der detaillierte Inhalt vonHTML5 implementiert die automatische Wiedergabe von Hintergrundmusik. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!