Boton on/off

[cristian_cena]

Hola. chequea esto:

Código HTML:

<input type="button" id="onoff" value="play" class=""/>
<audio id="audio" loop="loop">
    <source src="path/file.ogg" type="audio/ogg" >
    <source src="path/file.mp3" type="audio/mp3" >
</audio>
 

​

Código Javascript:

window.onload = function(){
    var audio  = document.getElementById("audio");
    var button = document.getElementById("onoff"); 
    //autoplay            
        audio.play(); button.value = "pause";
    //toggle
    button.onclick = function(){
        if(button.value == 'play'){
            audio.play();
            button.value = "pause";
        }
        else{
            audio.pause();
             button.value = "play";
        }
    }
}
 

En el condicional del evento onclick del boton podes añadir a este una clase "activo" (button.className = "activo") en la que luego aplicas estilos css a gusto (.activo{/*prop:val;*/}).

Saludos