html5 audio player - jquery toggle click play/pause?

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?

You can call native methods trough trigger in jQuery. Just do this:

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

And the same for pause: $('.play').trigger("pause");

EDIT: as F... pointed out in the comments, you can do something similar to access properties: $('.play').prop("paused");

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

I'm not sure why, but I needed to use the old skool document.getElementById();

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

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

  });
});

Check out an example: http://jsfiddle.net/HY9ns/1/

This thread was quite helpful. The jQuery selector need to be told which of the selected elements the following code applies to. The easiest way is to append a

    [0]

such as

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

it might be nice toggling in one line of code:

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

Try using Javascript. Its working for me

Javascript:

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

Simple Add this Code

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

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

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

Here is my solution using jQuery

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

And the working demo

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

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

if anyone else has problem with the above mentioned solutions, I ended up just going for the event:

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

works for me.

The reason why your attempt didn't work out is, that you have used a class-selector, which returns a collection of elements, not an (=one!) element, which you need to access the players properties and methods. To make it work there's basically three ways, which have been mentioned, but just for an overview:

Get the element – not a collection – by...

• Iterating over the colllection and fetching the element with this (like in the accepted answer).

• Using an id-selector, if available.

• Getting the element of a collection, by fetching it, via its position in the collection by appending [0] to the selector, which returns the first element of the collection.

Here is my solution (if you want to click another element on the page):

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

Simply Use

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

If you want to play it, you should use

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

If you want to stop it, you should use

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

I don't know why, but it works!