0

Hello I'm trying to create a play and pause button for a little web application I'm creating. I've already made a button that plays and another button that pauses but but now I need a button that'll run the play function when clicked and go back to the pause button when clicked.

var audio = new Audio("audio.mp3");

$(".play").click(function () {
    audio.play();
})

$(".pause").click(function () {
    audio.pause();
    $(this).toggleClass(".play");
});

And here's the buttons

<div class="play"><img src="../images/play.gif"></img></div>

<div class="pause"><img src="../images/pause.gif"></img></div>

I know there could be and easy way to make a div change classes every time its clicked.

user3369081
  • 3
  • 1

5 Answers5

1

I would set up the <html> like this:

<div id="play"><img src="../images/play.gif"></img></div>
<!-- initially a play button -->

Then I would just use a boolean to switch back and forth in the script.

var toggleIt = false;
$("#play").click(function(){
    if (!toggleIt){
        audio.play();
        toggleIt = true;
        $("#play").find("img").attr("src", "file url here");
    }
    else{
        audio.pause();
        toggleIt = false;
        $("#play").find("img").attr("src", "file url here");
    }
})

edit: and here is a fiddle using wonderful place holder kittens. Yes, you should be grateful for my exquisite taste in placeholder pictures.

royhowie
  • 11,075
  • 14
  • 50
  • 67
0

Set a variable then use a conditional to see if you should either play or pause the audio:

<div class="button"><img src="../images/play.gif"></img></div>

var play = true;
$(".button").click(function(){
    if (play){
        // Play
        audio.play();
        $(".button img").attr("src", "../images/pause.gif");
        play = false;
    } else {
        // Pause
        audio.pause();
        $(".button img").attr("src", "../images/play.gif");
        play = true;
    }
});

Example

Charlie
  • 11,380
  • 19
  • 83
  • 138
  • This bears no relation to the code in the question. He's not using a button - he's using 2 divs with images in them. – Reinstate Monica Cellio Mar 01 '14 at 19:46
  • @Archer He wants a single button to switch between playing and pausing the audio. "now I need a button that'll run the play function when clicked and go back to the pause button when clicked " He doesn't have to use a button, I only used one for the example. – Charlie Mar 01 '14 at 19:47
  • @Archer, that doesn't really matter. He set up the code well enough so that it can be easily modified to OP's needs - and further in Charlie's defense, OP wasn't very clear. – Alexander Lozada Mar 01 '14 at 19:47
  • I already tried to run something similar to this but when I did the button still would not play. – user3369081 Mar 01 '14 at 19:48
  • @user3369081 I posted an example on jsFiddle. Take a look at that and modify it to include the actual playing of the audio. – Charlie Mar 01 '14 at 19:49
0

You can create 2 diferents button and change de visibility

var audio = new Audio("audio.mp3");

$("#play").click(function () {
audio.play();
 $("#play").hide();
 $("#pause").show();

})

 $("#pause").click(function () {
 $("#pause").hide();
 $("#play").show();
   });
jorgeregidor
  • 208
  • 2
  • 13
0
var audio = new Audio("audio.mp3");

$(".play").click(function () {
    $(this).hide();
    $(".pause").show();
    audio.play();
})

$(".pause").click(function () {
    audio.pause();
    $(this).hide();
    $(".play").show();
    $(this).toggleClass(".play");
});

this is the simplest way. it would probably be better to do it with css psuedo classes, but i leave this pleasure to you if you care enough

Yuval Perelman
  • 4,499
  • 1
  • 22
  • 32
0

var audio = new Audio("audio.mp3");

$(".play").click(function () {
    $(this).hide();
    $(".pause").show();
    audio.play();
})

$(".pause").click(function () {
    audio.pause();
    $(this).hide();
    $(".play").show();
    $(this).toggleClass(".play");
});