Breaking News: Grepper is joining You.com. Read the official announcement!

toggleplay button javascript

Mark Senpai's Codes answered on July 21, 2022 Popularity 1/10 Helpfulness 1/10

answer toggleplay button javascript

toggleplay button javascript

Comment

/* make button element in html (youn can find the JavaScript at the 
end of this guide, the purpose of this guide is to guide beginners like me
who are confused on what to do.)

        <button id="btnpp" onclick="playPause()" type="button"></button>

edit with css and set the default background image into pause.png
    #btnpp {
    padding: 30px 30px;
    background-image: url('../img/btnTexture/play.png');
    background-size: cover;
    border-radius: 180px;
    border: none;
    cursor: pointer;
    }

    #btnpp:hover {
    background-size: cover;
    opacity: 0.5;
    } 
    
    I've failed a lot of time figuring out the perfect toggle play/pause button..
    I'd done a lot of research but nothing helpful at the end..
    So here it is.. I made it using the basic Logic of constructing a javascript
    toggleplay button.
    */

//apply button onclick function
function playPause() {
  //add var to the id "btnpp" button for the second function onclick..
    var btn = document.getElementById("btnpp"); //edit to your own button id
  //add var to the id "of your song/video"
    var ricksound = document.getElementById("rickRoll");
    if (ricksound.play) {
        ricksound.pause();
      
      //change button image to play.img when paused
        btn.style.backgroundImage = "url('img/btnTexture/play.png')" //edit to your own path
        
      //put another onclick function same id "btnpp" with var name 'btn'
        btn.onclick = function() {
            if (ricksound.paused) {
                ricksound.play();
              
              //change the button image to pause.img when played
                btn.style.backgroundImage = "url('img/btnTexture/pause.png')"
            } else {
                ricksound.pause();
              
              //change button image to play.img when paused
                btn.style.backgroundImage = "url('img/btnTexture/play.png')"
            }
        }
    }
}

/* 
So you see.. instead of using...
    function playSound() {
    var ricksound = document.getElementById("rickRoll");
    if (ricksound.play) {
        ricksound.pause();
        } else {
        ricksound.play();
        }
    }
    
I'm telling you, it's not gonna work! that's why I made another
button onclick function inside of the button playSound function
in order to repeat the function just like a "Recycle, Reuse, Reduce"
cycle diagram.. so that the two function will kept repeating when
button is pressed.. 

    Function playSound "pause" --> Onclick Function "play" --> Function playSound "pause"
    |<----------------------------------------------------------------------------------|
    
if it didn't work for you then feel free to message me or comment and I'll reply..
*/

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: button javascript

Link to this answer
Share Copy Link

Contributed on Jul 21 2022

Mark Senpai's Codes

0 Answers Avg Quality 2/10

toggleplay button javascript

Contents

More Related Answers

toggleplay button javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.