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