Boton on/off

[maurikius1983]

Iniciado por 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

Me viene casi perfecto, solo me falla dos detalles.

1-lo primero es que he cambiado image en vez de button, ya que el aspecto de button me rompia el diseño, incluso a pesar de ponerle imagen de fondo al button,y ahora en la imagen, me sale un borde que me sigue molestando.
2. Al aplicarle la clase, no me funciona para volver a reproducirlo, tengo que recargar la pagina.

Muchas gracias sobre todo. te dejo el codigo.

HTML
<input type="image" id="onOff" value="play" class=""/>
<audio id="audio" loop="loop">
<source src="path/file.ogg" type="audio/ogg" >
<source src="music/sleepAway.mp3" type="audio/mp3" >
</audio>

SCRIPT

<script type="text/javascript">
window.onload = function(){
var audio = document.getElementById("audio");
var image = document.getElementById("onOff");
//autoplay
audio.play(); image.value = "";
//toggle
image.onclick = function(){
if(image.value == 'play'){
audio.play();
image.value = "";
}
else{
audio.pause();
image.value = "";
image.className = "activo";
}
}
}
</script>

CSS

#onOff{
position: relative;
float: left;
width: 25px;
height: 25px;
background-image: url('../img/on.jpg');
margin-top: 4px;
cursor: pointer;
border:none;
}

#onOff.activo{
background-image: url('../img/off.jpg');
cursor: pointer;
border: none;
}