lecteur audio html5 – jquery cliquez sur lecture / pause?

Je me demande ce que je fais mal?

$('.player_audio').click(function() { if ($('.player_audio').paused == false) { $('.player_audio').pause(); alert('music paused'); } else { $('.player_audio').play(); alert('music playing'); } }); 

Je n’arrive pas à démarrer la piste audio si je frappe la balise “player_audio”.

 

une idée de ce que je fais mal ou de ce que je dois faire pour le faire fonctionner?

Eh bien, je ne suis pas sûr à 100%, mais je ne pense pas que jQuery étend / parsing ces fonctions et atsortingbuts ( .paused , .pause() , .play() ).

essayez d’accéder à ceux sur l’élément DOM, comme:

 $('.player_audio').click(function() { if (this.paused == false) { this.pause(); alert('music paused'); } else { this.play(); alert('music playing'); } }); 

Vous pouvez appeler des méthodes natives au moyen d’un déclencheur dans jQuery. Faites ceci:

 $('.play').sortinggger("play"); 

Et la même chose pour la pause: $('.play').sortinggger("pause");

EDIT: comme F … souligné dans les commentaires, vous pouvez faire quelque chose de similaire pour accéder aux propriétés: $('.play').prop("paused");

Je ne sais pas pourquoi, mais je devais utiliser l’ancien skool document.getElementById ();

  play sound 

et le JS:

 $(document).ready(function() { var playing = false; $('a#button').click(function() { $(this).toggleClass("down"); if (playing == false) { document.getElementById('player').play(); playing = true; $(this).text("stop sound"); } else { document.getElementById('player').pause(); playing = false; $(this).text("restart sound"); } }); }); 

Consultez un exemple: http://jsfiddle.net/HY9ns/1/

Ce fil était très utile. Le sélecteur jQuery doit indiquer à quel élément sélectionné le code suivant s’applique. Le plus simple est d’append un

  [0] 

tel que

  $(".test")[0].play(); 

Essayez d’utiliser Javascript. Ça marche pour moi

Javascript:

 var myAudioTag = document.getElementById('player_video'); myAudioTag.play(); 

Parce que Firefox ne supporte pas le format mp3. Pour que cela fonctionne avec Firefox, vous devez utiliser le format ogg.

Simplement utiliser

 $('audio').sortinggger('pause'); 

il pourrait être intéressant de basculer dans une seule ligne de code:

 let video = $('video')[0]; video[video.paused ? 'play' : 'pause'](); 

Je l’ai fait à l’intérieur d’un accordéon jQuery.

 $(function() { /*video controls*/ $("#player_video").click(function() { if (this.paused == false) { this.pause(); } }); /*end video controls*/ var stop = false; $("#accordion h3").click(function(event) { if (stop) { event.stopImmediatePropagation(); event.preventDefault(); stop = false; } $("#player_video").click(); }); }); 

Si quelqu’un d’autre a des problèmes avec les solutions mentionnées ci-dessus, j’ai fini par aller pour l’événement:

 $("#jquery_audioPlayer").jPlayer({ ready:function () { $(this).jPlayer("setMedia", { mp3:"media/song.mp3" }) ... pause: function () { $('#yoursoundcontrol').click(function () { $("#jquery_audioPlayer").jPlayer('play'); }) }, play: function () { $('#yoursoundcontrol').click(function () { $("#jquery_audioPlayer").jPlayer('pause'); })} }); 

travaille pour moi.

Voici ma solution en utilisant jQuery

  

Et la démo de travail

http://demo.ftutorials.com/html5-audio/

La raison pour laquelle votre tentative n’a pas fonctionné est que vous avez utilisé un sélecteur de classe, qui renvoie une collection d’éléments, et non un élément (= un!), Dont vous avez besoin pour accéder aux propriétés et méthodes des lecteurs. Pour que cela fonctionne, il y a essentiellement trois manières, qui ont été mentionnées, mais juste pour un aperçu:

Obtenez l’élément – pas une collection – par …

  • Itérer sur la colllection et aller chercher l’ élément avec this (comme dans la réponse acceptée).

  • Utiliser un sélecteur d’identifiant, si disponible.

  • Obtenir l’élément d’une collection, en le récupérant, via sa position dans la collection en ajoutant [0] au sélecteur, qui renvoie le premier élément de la collection.

Voici ma solution (si vous voulez cliquer sur un autre élément de la page):

 $("#button").click(function() { var bool = $("#player").prop("muted"); $("#player").prop("muted",!bool); if (bool) { $("#player").prop("currentTime",0); } }); 

Si vous voulez jouer, vous devez utiliser

 $("#audio")[0].play(); 

Si vous voulez l’arrêter, vous devez utiliser

 $("#audio").stop(); 

Je ne sais pas pourquoi, mais ça marche!