JAVASCRIPT

toggleplay button javascript

/* 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..
*/