communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > Utilisation de HTML5 pour contrôler le commutateur de musique de fond à l'aide des compétences du didacticiel Buttons_html5

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

WBOY
Libérer： 2016-05-16 15:46:18
original
2992 Les gens l'ont consulté

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>   
Étiquettes associées：
html5
source：php.cn
Article précédent：Meilleur générateur de code HTML5 et CSS3 recommandé pour les développeurs WEB_compétences du didacticiel html5 Article suivant：Explication détaillée de l'application de l'attribut de téléchargement dans les compétences du didacticiel HTML5_html5
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal