web-dev-qa-db-fra.com

lecteur audio html5 - jquery bascule 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 clique sur la balise "player_audio".

<div class='thumb audio'><audio class='player_audio' src='$path/$value'></audio></div>

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

jqueryaudiohtml5
49
matt

Eh bien, je ne suis pas sûr à 100%, mais je ne pense pas que jQuery étend/analyse ces fonctions et attributs (.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');
  }
});
68
jAndy

Vous pouvez appeler des méthodes natives via trigger dans jQuery. Faites juste ceci:

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

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

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

94
Thash

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

<audio id="player" src="http://audio.micronemez.com:8000/micronemez-radio.ogg"> </audio>
<a id="button" title="button">play sound</a>

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");
      }

  });
});

Découvrez un exemple: http://jsfiddle.net/HY9ns/1/

17
edwardsharp

Ce fil était très utile. Le sélecteur jQuery doit indiquer à quels éléments du code suivant le code s'applique Le plus simple est d’ajouter un

    [0]

tel que

    $(".test")[0].play();
15
David Sinclair

ça pourrait être bien de basculer dans une ligne de code:

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

2
Roey

Essayez d'utiliser Javascript. Ça marche pour moi

Javascript:

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

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

1
MadBrain

Simplement utiliser 

$('audio').trigger('pause');
1
Deepak swain

Simple Ajoutez ce code

        var status = "play"; // Declare global variable

        if (status == 'pause') {
            status='play';                
        } else {
            status = 'pause';     
        }
        $("#audio").trigger(status);
0
Mantu

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);
        }
});
0
Halpo

Si vous voulez y jouer, vous devriez utiliser 

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

Si vous voulez l'arrêter, vous devriez utiliser 

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

Je ne sais pas pourquoi, mais ça marche!

0
Velade

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

Obtenez l'élément - pas une collection - par ...

  • Itération sur la collection et récupération l'élément avec this (comme dans la réponse acceptée).

  • Utiliser un sélecteur d’identité, 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, ce qui retourne le premier élément de la collection.

0
Ida Ebkes

si quelqu'un d'autre a un problème avec les solutions mentionnées ci-dessus, je me suis retrouvé juste 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.

0
yogee

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();
        });

    });
0
kelly

Voici ma solution en utilisant jQuery

<script type="text/javascript">
    $('#mtoogle').toggle(
        function () {
            document.getElementById('playTune').pause();
        },
        function () {
            document.getElementById('playTune').play();
        }
    );
</script>

Et la démo de travail

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

0
webtech