Html5 audio player - jquery toggle click play / pause?

Question

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 not start the sound track if I hit the tag "player_audio".

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

Any idea what I'm doing wrong or what I need to do to get it working?

Answer 1

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

try accessing the elements above the DOM element, for example:

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

Answer 2

In jQuery, you can call built-in methods to trigger a trigger. Just do the following:

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

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

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

Answer 3

I'm not sure why, but I needed to use the old document 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 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"); } }); }); 

See an example: http://jsfiddle.net/HY9ns/1/

Answer 4

This thread was quite useful. The jQuery selector must specify to which of the selected items the following code applies. The easiest way is to add

  [0] 

such as

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

Answer 5

Try using Javascript. His work is for me

JavaScript:

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

Answer 6

It may be convenient to switch in one line of code:

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

Answer 7

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

Answer 8

Just use

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

Answer 9

I did this inside the 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(); }); }); 

Answer 10

if anyone else has problems with the above solutions, I ended up just 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.

Answer 11

Here is my solution using jQuery

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

And a working demo

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

Answer 12

The reason your attempt didn’t work is because you used a class selector that returns a collection of elements, and not the element (= one!) That you need to access the properties and methods of the players, To make it work there in basically the three methods that have been mentioned, but only for review:

Get an item - not a collection - by ...

• Iterate over the number and select an element using this (as in the accepted answer).

• Use id selector if available.

• Getting a collection item by retrieving it by its position in the collection by adding [0] to the selector, which returns the first collection item.

Answer 13

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

Answer 14

If you want to play it, you must use

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

If you want to stop him, you must use

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

I don’t know why, but it works!

Answer 15

Just add this code.

  var status = "play"; // Declare global variable if (status == 'pause') { status='play'; } else { status = 'pause'; } $("#audio").trigger(status);