Maison > interface Web > Tutoriel H5 > le corps du texte

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

不言
Libérer: 2018-06-09 16:56:09
original
6975 Les gens l'ont consulté

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>
Copier après la connexion

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(&#39;music2&#39;);    
    var music_btn = document.getElementById(&#39;music_btn2&#39;);    
    if (music.paused){    
        music.play();    
        music_btn.src = &#39;play.gif&#39;;    
    }    
    else{    
        music.pause();    
        music_btn.src = &#39;pause.gif&#39;;     
    }    
}   如果使用jQuery代码可以这样写:
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!