Utilisation de HTML5 pour contrôler les commutateurs de musique de fond

Parfois, nous ajoutons de la musique de fond à la page, permettant aux utilisateurs d'allumer et de désactiver la musique de fond par eux-mêmes, en particulier les pages multimédias fabriquées sur la HTML5 mobile. La balise audio de HTML5 peut obtenir l'état de lecture audio, et la musique de fond peut être désactivée et activée en touchant le bouton.

Les rendus sont les suivants:

Créez une page HTML5, placez la balise <audio>, définissez la source de fichier audio et définissez la lecture de boucle. Préparez deux images, indiquant les deux états d'activation et de pause de la musique de fond, vous pouvez cliquer.

CODE XML / HTML COPIE COPIRE DU PIRMOCHE

1. <DudioId = music2src = music.mp3loop = LOOP> Votre navigateur ne prend pas en charge la balise audio. </ audio>
2. <ahref = javascript: playpause ();> <imgsrc = pause.gifwidth = 48height = 50id = music_btn2border = 0> </a>

Lorsque nous avons cliqué sur le bouton Image de commutation, nous avons appelé le script JavaScript et la fonction playPause (). Dans la fonction, jugez le statut de lecture audio audio. S'il a été arrêté (interrompu), appelez .play () pour continuer à jouer. Si c'est dans le statut de lecture, la lecture. Pause () sera immédiatement suspendu. Lorsque vous basculez entre les deux états, veuillez consulter le code:

JavaScript Code Copier le contenu dans le presse-papiers

1. functionplayPause () {
2. varmusic = document.getElementById ('music2');
3. varmusic_btn = document.getElementById ('music_btn2');
4. if (music.paused) {
5. music.play ();
6. music_btn.src = 'play.gif';
7. }
8. autre{
9. music.pause ();
10. music_btn.src = 'pause.gif';
11. }
12. }

Si vous utilisez le code jQuery, vous pouvez l'écrire comme ceci:

JavaScript Code Copier le contenu dans le presse-papiers

1. <DudioId = musicsrc = http: //cctv3.qiniudn.com/zuixingfuderen.mp3autoplay=Autoplayloop=loop> Votre navigateur ne prend pas en charge la balise audio. </ audio>
2. <aide = audio_btn> <imgsrc = play.gifwidth = 48Height = 50id = music_btnborder = 0> </a>
3. <cript>
4. $ (# audio_btn) .click (function () {
5. varmusic = document.getElementById (musique);
6. if (music.paused) {
7. music.play ();
8. $ (# music_btn) .attr (src, play.gif);
9. }autre{
10. music.pause ();
11. $ (# music_btn) .attr (src, pause.gif);
12. }
13. });
14. </cript>