Tema: Boton on/off
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 17/05/2012, 20:47
maurikius1983
Usuario no validado
 
Fecha de Ingreso: abril-2012
Mensajes: 134
Antigüedad: 12 años, 11 meses
Puntos: 0
Respuesta: Boton on/off

Cita:
Iniciado por cristian_cena Ver Mensaje
Hola. chequea esto:

Código HTML:
Ver original
  1. <input type="button" id="onoff" value="play" class=""/>
  2. <audio id="audio" loop="loop">
  3.     <source src="path/file.ogg" type="audio/ogg" >
  4.     <source src="path/file.mp3" type="audio/mp3" >

Código Javascript:
Ver original
  1. window.onload = function(){
  2.     var audio  = document.getElementById("audio");
  3.     var button = document.getElementById("onoff");
  4.     //autoplay            
  5.         audio.play(); button.value = "pause";
  6.     //toggle
  7.     button.onclick = function(){
  8.         if(button.value == 'play'){
  9.             audio.play();
  10.             button.value = "pause";
  11.         }
  12.         else{
  13.             audio.pause();
  14.              button.value = "play";
  15.         }
  16.     }
  17. }

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

Última edición por maurikius1983; 17/05/2012 a las 20:58