Comment contrôler le commutateur de musique de fond et le son de lecture automatique avec jquery

Comment contrôler le commutateur de musique de fond et le son de lecture automatique avec jquery_jquery

WBOY

Libérer： 2016-05-16 16:15:23

original

2782 Les gens l'ont consulté

L'exemple de cet article décrit comment jquery contrôle le commutateur de musique de fond et la lecture automatique des invites. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

De nombreuses personnes ajoutent un morceau de musique de fond à la page Web lorsqu'elles apprennent pour la première fois à créer des pages Web. Dès qu'elles entendent la musique jouer, elles ressentent souvent un sentiment d'accomplissement.

Ici, je vais vous expliquer comment utiliser js pour contrôler la lecture et l'arrêt de la musique de fond. Les détails sont les suivants :

1. Commutateur de musique de fond de contrôle jquery

Copier le code Le code est le suivant :

Désactiver la musique de fond

Ce qui précède présente comment jquery contrôle le commutateur de musique de fond et sera développé ultérieurement.

2. JQuery joue automatiquement le son d'invite

La première fonction sonore de notification automatique pour le site Web a été trouvée sur le forum Discuz. Mais un problème est qu'il ne prend en charge que Flash et ne prend pas en charge HTML5. Il n'est pas clair si la dernière version prend en charge HTML5.
Pour la version Discuz 7.2, player.swf, pm_1.mp3, pm_2.mp3, pm_3.mp3 sont fournis, puis utilisez le script suivant pour implémenter :

Copier le code Le code est le suivant :

Malheureusement, cette méthode est limitée au flash et vous risquez de rencontrer des problèmes sur les appareils Apple.

Le lecteur open source HTML5 JPlayer prend en charge la lecture automatique des sons d'invite
JPlayer prend en charge les événements de lecture pour déclencher des invites de lecture automatique.

1. Chargez JPlayer dans une couche div, telle que #jplayer.

Copier le code Le code est le suivant :

$(function() { 

$("#jplayer").jPlayer({ 

swfPath : "http://www.jplayer.org/latest/js/Jplayer.swf", 

prêt : fonction () { 

           $(this).jPlayer("setMedia", { 

            mp3 : "./resources/message.mp3" 

         }); 

}, 

Fourni : "mp3" 

}); 

});

Ajoutez la partie du corps :

Après le chargement de JQuery, le contenu div de jplayer devient :
dans les navigateurs prenant en charge swf

Copier le code Le code est le suivant :

< ;param name="wmode" value="opaque">

devient :
dans les navigateurs prenant en charge HTML5

Copier le code Le code est le suivant :

Une fois le chargement terminé, l'événement de lecture est déclenché.

2. Déclencher l'événement sonore de lecture

Copier le code Le code est le suivant :

$("#jplayer").jPlayer('play');

3. Fonction de lecture en boucle, émettant une tonalité d'invite toutes les 5 secondes

Copier le code Le code est le suivant :

fonction PlaySound() { 

$("#jplayer").jPlayer('jouer'); 

setInterval("PlaySound()", 5000); 

Renvoie vrai ; 

>

Annexe :

1. Résolvez le problème selon lequel le son d'invite ne peut pas être joué automatiquement

Si vous exécutez l'événement déclencheur de lecture immédiatement après le chargement de JQplayer, cela n'aura aucun effet. Je ne connais pas la raison précise. C'est probablement parce que le fichier audio n'est pas chargé.

2. La solution est de laisser l'événement déclencheur attendre 5 secondes pour s'exécuter.

Copier le code Le code est le suivant :

setTimeout("$('#jplayer').jPlayer('play ')", 5000);

Une fois la page chargée, un son d'invite sera joué automatiquement après 5 secondes.

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.