Botón de play/pause para poder aplicarles css

[Luisa29]

nilburcion muchísimas gracias. Ahora parece que hay un error, al abrir la página no se muestra el botón, pero al acercar el ratón y pinchar aparece y ya funciona correctamente.
Es muy raro, a ver si he puesto algo mal, aquí te paso como lo he puesto:

Código:

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

}

.pause {
	background:url(pausa-sobre.png) no-repeat;
	width:68px;
	height:68px;
	}
.play {
	background:url(play-sobre.png) no-repeat;
	width:68px;
	height:68px;
	
	}

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

    // 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);
    </script>