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'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?

0xCC · Accepted Answer · 2017-04-19 10:54:22Z

108

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

edited Apr 19, 2017 at 10:54

answered Nov 30, 2011 at 15:32

0xCC

1,5141 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Akim Kelar Over a year ago

Maybe you know how to externally (e.m. using $('.play')) to check is player play or paused ?

0xCC Over a year ago

You can access element its methods and properties by jQuery.get e.g. $('.play').get(0) or $('.play)[0] Then you can use the play() or plause() methods and the paused property to check if the video is paused. $('.play').get(0).paused is boolean - true if it is paused, false if isn't.

fxbt Over a year ago

It may be old but you can access the paused attributes with $('.play').prop("paused");

jerrygarciuh Over a year ago

Also helpful if you need to set play time to 0 : $(".audioDemo").prop("currentTime",0);

jAndy · Accepted Answer · 2016-12-23 12:34:12Z

75

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

edited Dec 23, 2016 at 12:34

answered Jun 7, 2010 at 8:56

jAndy

237k57 gold badges313 silver badges363 bronze badges

5 Comments

matt Over a year ago

any idea why a simple mp3 in my audio_player won't work in firefox 3.6?? it just shows a black rectangle. chrome and safari do not have problems at all!

Darren Oster Over a year ago

As MadBrain pointed out, Firefox doesn't like MP3s. Use Ogg Vorbis instead. Isn't standardization wonderful?

rroche Over a year ago

you can use the event variable passed by bind to the function enclosed on your click to get the current target which is a DOMElement function(event){ event.currentTarget.play(); } instead of relying on the keyword this

Jonas T Over a year ago

The audio doesn't pause in Firefox for some reasons.

huykon225 Over a year ago

it's not working now. I try but nothing alert on browser

edwardsharp · Accepted Answer · 2011-11-01 05:17:22Z

17

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/

answered Nov 1, 2011 at 5:17

edwardsharp

1,24210 silver badges17 bronze badges

1 Comment

Gan Over a year ago

Instead of getElementById, you can use jQuery like this: $('#player').get(0).play() or $("#player")[0].play() .

Community · Accepted Answer · 2017-05-23 11:54:56Z

16

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

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 18, 2013 at 21:58

David Sinclair

4,4973 gold badges21 silver badges13 bronze badges

2 Comments

Slake Over a year ago

Works perfectly, with this you can 'play' & 'pause' at anytime by js.

Mark Brittingham Over a year ago

This is the right answer. It isn't hard pulling the element out - simple JQuery basics.

Roey · Accepted Answer · 2017-06-14 09:41:35Z

4

it might be nice toggling in one line of code:

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

answered Jun 14, 2017 at 9:41

Roey

1,7451 gold badge22 silver badges17 bronze badges

Comments

Irvin Dominin · Accepted Answer · 2015-10-09 16:15:48Z

2

Try using Javascript. Its working for me

Javascript:

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

edited Oct 9, 2015 at 16:15

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

answered Apr 12, 2013 at 1:20

Muhammad Muneer

514 bronze badges

1 Comment

Simon MᶜKenzie Over a year ago

You should consider updating your answer to match the code in the question - the question doesn't mention an element called audioTag1.

Mantu · Accepted Answer · 2019-05-20 18:05:12Z

2

Simple Add this Code

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

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

answered May 20, 2019 at 18:05

Mantu

294 bronze badges

Comments

MadBrain · Accepted Answer · 2010-06-07 12:29:39Z

1

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

answered Jun 7, 2010 at 12:29

MadBrain

111 bronze badge

1 Comment

Darren Oster Over a year ago

This should have been a comment to the post in questions, not a separate answer.

arulmr · Accepted Answer · 2013-08-17 09:00:40Z

1

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/

edited Aug 17, 2013 at 9:00

arulmr

8,8629 gold badges57 silver badges70 bronze badges

answered Aug 17, 2013 at 8:41

webtech

3293 silver badges14 bronze badges

Comments

kelly · Accepted Answer · 2010-06-19 21:47:26Z

0

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

    });

answered Jun 19, 2010 at 21:47

kelly

1

Comments

yogee · Accepted Answer · 2012-11-02 15:14:31Z

0

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.

answered Nov 2, 2012 at 15:14

yogee

1821 silver badge11 bronze badges

Comments

Ida · Accepted Answer · 2014-03-21 14:37:09Z

0

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.

answered Mar 21, 2014 at 14:37

Ida

3,97324 silver badges44 bronze badges

Comments

Halpo · Accepted Answer · 2014-05-01 14:54:41Z

0

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

answered May 1, 2014 at 14:54

Halpo

3,1543 gold badges28 silver badges59 bronze badges

Comments

Deepak swain · Accepted Answer · 2017-04-05 07:00:32Z

0

Simply Use

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

answered Apr 5, 2017 at 7:00

Deepak swain

3,7081 gold badge33 silver badges26 bronze badges

Comments

Marcello B. · Accepted Answer · 2017-12-01 04:04:15Z

0

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!

edited Dec 1, 2017 at 4:04

Marcello B.

4,47011 gold badges48 silver badges72 bronze badges

answered Dec 1, 2017 at 1:14

Velade

1

Collectives™ on Stack Overflow

html5 audio player - jquery toggle click play/pause?

15 Answers 15

4 Comments

5 Comments

1 Comment

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

4 Comments

5 Comments

1 Comment

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related