Boton on/off

[maurikius1983]

Hola chico he introducido musica en mi web, y he creado un boton para on/off, la pregunta es como seria el script para que ese mismo boton sea igual para dejarlo en mute y cuando volviese a sonar se escuchase la musica. Le he aplicado dos icono diferentes uno normal y otro cuando haces hover, y el que cuando haces hover se quede activado.
Es decir un boton para poner y quitar la musica y cuando se le pulse para cambiar el estado cambie el icono.

Gracias a todos.

[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

[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;
}

[cristian_cena]

Iniciado por maurikius1983

como seria para al volver a pulsar se active otra vez

Código Javascript:

// ...
if(button.value == 'play'){
// ...
    button.className = "activo";
}
else{
// ...
    button.className = "";
}
// ...
 

Iniciado por maurikius1983

seria posible utilizar en vez un button una imagen directamente

Si, solo reemplaza el input por la imagen, es decir, lo que cuenta es que mantengas el identificador.

[maurikius1983]

Iniciado por cristian_cena

Código Javascript:

// ...
if(button.value == 'play'){
// ...
    button.className = "activo";
}
else{
// ...
    button.className = "";
}
// ...
 

Si, solo reemplaza el input por la imagen, es decir, lo que cuenta es que mantengas el identificador.

Ya me funciona perfecto, la habia cagado por no mirar bien el codigo, queria ponerlo en estado activo tanto cuando esta inactivo como cuando no. Ya esta perfec, solo me falta quitarle el border a la image.

[maurikius1983]

Bueno ya lo he solucionado, he mirado en unos ejercicios que tenia antiguos y es un poco trampa, pero como no me acuerdo como hacer para quitar el borde en la imagen de fondo del image input, lo que he hecho ha sido poner una imagen completamente transparente, y ya los fondos del CSS no aparecen con el bordemolesto.
Muchas gracias por la ayuda, si saben como quitar el border ok, si no por mi cierren el post.

[cristian_cena]

usa la propiedad css "border",
si queres profundizar esta guía es muy buena: http://www.librosweb.es/css/index.html

[maurikius1983]

Iniciado por cristian_cena

usa la propiedad css "border",
si queres profundizar esta guía es muy buena: [url]http://www.librosweb.es/css/index.html[/url]

Muchas gracias por la info, pero de CSS y HTML no tengo problemas, conozco todas la propiedades casi, el problema esque en los input en algunos navegadores, aparece un borde, que aunque aplicando border:none, o border:0 , te sigue apareciendo. y eso lo he solucionado mil veces poniendo una imagen totalmente transparente como img, y ya pongo lo que quiero de background, Muchas gracias por la ayuda prestada cristian_cena, ya lo tengo todo como queria, quizas en el script de on/off no se si por cansancio o yo que se, no he dado como sacarlo, ya que si hubiera sido con todas la propiedades de audio con html5 se saca de momento, pero solo un boton me ha dejado fuera de juego. Repito que muchas gracias y si necesitas algo me mandas un privado y te ayudo. Gracias

[cristian_cena]

De nada y me alegro que te haya servido.
PD: apuesto a que dentro de las propiedades que desconoces está "outline" ;)

[maurikius1983]

Iniciado por cristian_cena

De nada y me alegro que te haya servido.
PD: apuesto a que dentro de las propiedades que desconoces está "outline" ;)

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

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

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

Asi lo tengo y no me lo quitaba, se que el outline es parecido al border pero fuera de los parametros.

[maurikius1983]

He vuelto a comprobarlo y tanto none como "0", no me lo acepta, En este caso en chrome es parecido a un border de 1px solid blanquecino, y no me lo quita, lo he intentado, y nada, lo que si recuerdo es que una vez me dijo un compi que el lo soluciono con la imagen transparente, y asi lo hice y ok, igual que ahora, se que hacer lo de la img es trampa, pero no puedo perder demasiado tiempo en una sola cosa.