Botón de play/pause para poder aplicarles css

[Luisa29]

Hola amigos, tengo un botón en mi web que activa un audio en streaming. Antes de pulsar muestra una imagen de un play y al activar la reproducción el botón cambia a pause. Como el código js lo que hace es cambiar una imagen por otra me gustaría que en vez de imagen fuesen botones hechos desde cero con css tanto el play como el pause. ¿Cómo podría modificar el código para ello?


Código js:

Código:

<script type="text/javascript">
   var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer(){
	audio = new Audio();
	audio.src = "http://streaming-audio";
	audio.loop = true;
	audio.play();
	// Set object references
	playbtn = document.getElementById("playpausebtn");
	// Add Event Handling
	playbtn.addEventListener("click",playPause);
	// Functions
	function playPause(){
		if(audio.paused){
		    audio.play();
		    playbtn.style.background = "url(pausa.png) no-repeat";
	    } else {
		    audio.pause();
		    playbtn.style.background = "url(play.png) no-repeat";
	    }
	}

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


    </script>

Código css:

Código:

	button{ border:none; cursor:pointer; outline:none; }
button#playpausebtn{
	background:url(pausa.png) no-repeat;
	width:68px;
	height:68px;
}

HTML:

Código:

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

A ver si me podéis echar una manita, tengo poca idea de js.