Méthode HTML5 pour utiliser des boutons pour contrôler le commutateur de musique de fond

Cet article présente principalement la méthode d'utilisation des boutons pour contrôler le commutateur de musique de fond en HTML5. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Nous le partageons parfois. mettez-le sur la page L'ajout de musique de fond permet aux utilisateurs d'activer et de désactiver eux-mêmes la musique de fond, en particulier pour les pages multimédias basées sur le téléphone mobile HTML5. La balise audio HTML5 peut obtenir l'état de lecture de l'audio, et la musique de fond peut. être éteint et allumé en touchant le bouton.

Le rendu est le suivant :

Voir l'effet démo  

HTML

Créez une page HTML5, placez la balise b97864c2e0ef2353a16c4d64c7734e92, définissez la source du fichier audio et définissez la lecture en boucle. Préparez deux images, qui représentent les deux états d'activation et de pause de la musique de fond, sur lesquelles vous pouvez cliquer.

XML/HTML

<audio id="music2" src="music.mp3"  loop="loop">你的浏览器不支持audio标签。</audio>    
<a href="javascript:playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0"></a>

Javascript

Nous avons appelé le script javascript lorsque nous avons cliqué sur le bouton changer d'image, Fonction playPause(). La fonction détermine l'état de lecture audio. Si elle s'est arrêtée (en pause), appelez .play() pour continuer la lecture. Si elle est en état de lecture, mettez immédiatement la lecture en pause. Lorsque les deux états changent, l'image du bouton. est mis à jour dans le temps. Veuillez consulter le code :
JavaScript

function playPause() {    
    var music = document.getElementById('music2');    
    var music_btn = document.getElementById('music_btn2');    
    if (music.paused){    
        music.play();    
        music_btn.src = 'play.gif';    
    }    
    else{    
        music.pause();    
        music_btn.src = 'pause.gif';     
    }    
}   如果使用jQuery代码可以这样写：

JavaScript

<audio id="music" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签。</audio>    
<a id="audio_btn"><img src="play.gif" width="48" height="50" id="music_btn" border="0"></a>    
<script>    
$("#audio_btn").click(function(){    
    var music = document.getElementById("music");    
    if(music.paused){    
        music.play();    
        $("#music_btn").attr("src","play.gif");    
    }else{    
        music.pause();    
        $("#music_btn").attr("src","pause.gif");    
    }    
});    
</script>

Ce qui précède est l'intégralité du contenu. de cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour obtenir de l'aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

Page HTML5 pour implémenter les messages et les réponses

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!