Informationen zur Implementierung des automatischen Wiedergabeeffekts von Hintergrundmusik in h5

Das Autoplay-Attribut von Musik wird hier ebenfalls eingeführt:

<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 legt fest, dass das Audio abgespielt wird, sobald es fertig ist.

Wenn diese Eigenschaft festgelegt ist, wird der Ton automatisch abgespielt.

In tatsächlichen Anwendungen stoßen wir jedoch häufig auf das Phänomen, dass Autoplay nicht abgespielt werden kann, 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 dies geschrieben haben, ist dies bei den meisten Android-Geräten der Fall Maschinen können grundsätzlich automatisch erkennen, dass es abgespielt wurde, aber es funktioniert derzeit immer noch nicht auf Apple-Telefonen.

Hier habe ich eine Schaltfläche zum Hinzufügen zur Ladeseite verwendet. Klicken Sie auf die Schaltfläche Schaltfläche, um den Benutzer zum Abschließen der automatischen Wiedergabe der Hintergrundmusik zu führen, Code wie folgt:

$("html").one('touchstart',function(){
audio.play();
})

An diesem Punkt wird die automatische Wiedergabe der Hintergrundmusik realisiert. Diese Methode eignet sich für Projekte, die geladen werden Seiten und müssen klicken, um h5...

Das obige ist der detaillierte Inhalt vonInformationen zur Implementierung des automatischen Wiedergabeeffekts von Hintergrundmusik in h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!