Tema: Boton on/off
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 17/05/2012, 11:24
Avatar de cristian_cena
cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 8 meses
Puntos: 269
Respuesta: Boton on/off

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