How to create html button that runs two functions?

Question

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.

can't you just use a conditional? Also check jQuery's addClass and removeClass if you're looking to change classes. — Alexander
– Alexander, Commented Mar 1, 2014 at 19:42
I've tried a conditional but it didn't work. I'll look into addClass and removeClass though. — user3369081
– user3369081, Commented Mar 1, 2014 at 19:49

royhowie · Accepted Answer · 2014-03-01 19:57:16Z

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.

edited Mar 1, 2014 at 19:57

answered Mar 1, 2014 at 19:44

royhowie

11.2k14 gold badges54 silver badges67 bronze badges

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

Comments

Yuval Perelman · Accepted Answer · 2014-03-02 20:40:22Z

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

edited Mar 2, 2014 at 20:40

answered Mar 1, 2014 at 19:48

Yuval Perelman

4,8791 gold badge25 silver badges33 bronze badges

2 Comments

user3369081 Over a year ago

Thank you this works perfectly. I just added ("play").show() to make the play button show up when it's paused.

Charlie Over a year ago

This is so counterintuitive

jorgeregidor · Accepted Answer · 2014-03-01 19:48:00Z

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

answered Mar 1, 2014 at 19:48

jorgeregidor

2082 silver badges13 bronze badges

Comments

Charlie · Accepted Answer · 2014-03-01 19:53:10Z

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

edited Mar 1, 2014 at 19:53

answered Mar 1, 2014 at 19:43

Charlie

11.7k19 gold badges88 silver badges141 bronze badges

5 Comments

Reinstate Monica Cellio Over a year ago

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.

Charlie Over a year ago

@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.

Alexander Over a year ago

@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.

user3369081 Over a year ago

I already tried to run something similar to this but when I did the button still would not play.

Charlie Over a year ago

@user3369081 I posted an example on jsFiddle. Take a look at that and modify it to include the actual playing of the audio.

user5987717 · Accepted Answer · 2016-08-10 09:16:18Z

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

answered Aug 10, 2016 at 9:16

user5987717

Collectives™ on Stack Overflow

How to create html button that runs two functions?

5 Answers 5

Comments

2 Comments

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related