HTML5 implémente la lecture automatique de la musique de fond

Attribut de lecture automatique :

(Tutoriel recommandé : Tutoriel vidéo html5)

<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 dès que le l'audio est prêt Commencez la lecture. 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 en 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 machines Android peuvent en gros réaliser lecture automatique. Mais les téléphones Apple ne fonctionnent toujours pas pour le moment

Ici, j'utilise un bouton pour ajouter à la page de chargement. Lorsque le chargement est terminé, cliquez sur le bouton pour guider l'utilisateur pour terminer la lecture automatique. de musique de fond. Le code est le suivant :

$("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 des pages de chargement et doivent cliquer pour entrer h5.

Recommandations associées : 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!