JSFiddle - React, Tailwind, and code Playground

HTML

<button id="playpausebtn" class="play"></button>

CSS

button{ border:none; cursor:pointer; outline:none; }


.pause {
	background:url('http://www.jazz.org/images/pause-btn-68px.png') no-repeat;
	width:68px;
	height:68px;
	}
.play {
	background:url('http://www.barrydouglas.com/wordpress/wp-content/themes/barry-douglas/img/icon-play.png') no-repeat;
	width:68px;
	height:68px;
	}

JavaScript

var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer(){
    audio = new Audio();
    audio.src = "http://a1113.phobos.apple.com/us/r1000/092/Music/8e/35/7b/mzm.mtmnarwk.aac.p.m4a";
    audio.loop = true;
    audio.play();

    // Set object references
    playbtn = document.getElementById("playpausebtn");

    // if it's not playing after calling play(), show the other icon
    if(!audio.paused) {
        playbtn.setAttribute("class", "pause");        
    }

    // Add Event Handling
    playbtn.addEventListener("click",playPause);
    // Functions
    function playPause(){
        if(audio.paused){
            audio.play();
            playbtn.setAttribute("class", "pause");
        } else {
            audio.pause();
            playbtn.setAttribute("class", "play");
        }
    }

}
window.addEventListener("load", initAudioPlayer);