Utilisation de HTML5 pour contrôler le commutateur de musique de fond à l'aide des compétences du didacticiel Buttons_html5

Le rendu est le suivant :

Voir l'effet de démonstration Téléchargement du code source

HTML

Créez une page HTML5, placez la balise

1. <audio id="music2" src="music.mp3" boucle="loop">Votre navigateur ne prend pas en charge la balise audio. audio> 
2. <a href="javascript : playPause();"><img src="pause.gif" largeur="48" hauteur="50" id="music_btn2" frontière="0">a> 

Javascript

Nous avons appelé le script javascript, la fonction playPause() lorsque nous avons cliqué sur le bouton changer d'image. La fonction détermine l'état de lecture audio. Si elle a été 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, le bouton. l'image est mise à jour à temps. Veuillez consulter le code :
Code JavaScriptCopier le contenu dans le presse-papiers

1. fonction playPause() {
2.  var music = document.getElementById('music2'); 
3.  var music_btn = document.getElementById('music_btn2'); 
4. si (musique.pause){ ​​​​
5. music.play();
6. music_btn.src = 'play.gif'
7. }  
8.  autre{ 
9. musique.pause();
10. music_btn.src = 'pause.gif'
11. }  
12. } 

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

Code JavaScriptCopier le contenu dans le presse-papiers

1. "musique" src="http://cctv3.qiniudn.com/zuixingfuderen. mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签。    
2. "audio_btn">"play.gif" width="48" height="50" id="music_btn" border="0">    
3. <script>    </span> </li> <li> <span>$(</span><span class="string">"#audio_btn"</span><span>).click(</span><span class="keyword">fonction</span><span>(){    </span> </li> <li class="alt"> <span>    </span><span class="keyword">var</span><span> music = document.getElementById(</span><span class="string">"music"</span><span>);    </span> </li> <li> <span>    </span><span class="keyword">if</span><span>(musique.pause){    </span> </li> <li class="alt"> <span>        music.play();    </span> </li> <li> <span>        $(</span><span class="string">"#music_btn"</span><span>).attr(</span><span class="string">"src"</span><span>,</span><span class="string"> "play.gif"</span><span>);    </span> </li> <li class="alt"> <span>    }</span><span class="keyword">autre</span><span>{    </span> </li> <li> <span>        music.pause();    </span> </li> <li class="alt"> <span>        $(</span><span class="string">"#music_btn"</span><span>).attr(</span><span class="string">"src"</span><span>,</span><span class="string"> "pause.gif"</span><span>);    </span> </li> <li> <span>    }    </span> </li> <li class="alt"> <span>});    </span> </li> <li> <span></script>