À propos de la mise en œuvre de l'effet de lecture automatique de la musique de fond dans h5

L'attribut de lecture automatique de la musique est également introduit ici :

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

L'attribut de lecture automatique stipule que la lecture audio commencera dès qu'elle sera prête.

Si cette propriété est définie, l'audio sera lu automatiquement.

Cependant, dans les applications réelles, nous rencontrons souvent le phénomène selon lequel la lecture automatique ne peut pas être lue, principalement parce que certains navigateurs ou téléphones mobiles bloquent ou ne prennent pas en charge l'attribut de lecture automatique. Ici, je vais présenter la méthode que j'utilise.

Tout d'abord : le code dans le code HTML est le suivant

<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="" />
<!--这里是一个可以控制背景音乐播放暂停的开关-->

Utilisez le code suivant dans le fichier js

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")
}
}
})

Après avoir écrit ceci, la plupart des Android les machines peuvent essentiellement réaliser automatiquement Cela a été joué, mais cela ne fonctionne toujours pas sur les téléphones Apple pour le moment

Ici, j'ai utilisé un bouton à ajouter à la page de chargement. Lorsque le chargement est terminé, cliquez sur le bouton. bouton pour guider l'utilisateur pour terminer la lecture automatique de la musique de fond, codez comme suit :

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

À ce stade, la lecture automatique de la musique de fond est réalisée. Cette méthode convient aux projets qui ont un chargement. pages et il faut cliquer pour entrer h5...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!