html5 audio player - jquery toggle click play/pause???

Question

hello guys,

i wonder what i'm doing wrong?

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

i can't seem to start the audio track if i hit the "player_audio" tag.

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

any idea what i'm doing wrong or what i have to do to get it working?

Answer 1

Well, I'm not 100% sure, but I don't think jQuery extends/parses those functions and attributes (.paused, .pause(), .play()).

try to access those over the DOM element, like

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

Answer 2

Because Firefox does not support mp3 format. To make this work with Firefox, you should use the ogg format.

Answer 3

I did it inside of a jQuery accordion.

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

    });