[SOLUCIONADO] Boton de silenciar musica

#1 (**permalink**) 25/06/2013, 08:09

Hola a todos.

Estoy poniendo musica a mi documento html usando HTML5 con la etiqueta <audio> pero hay un detalle quiero poder mutear dicha musica con un boton. Explico

Quiero poner un boton de entrada que salga una corneta que significa que el audio esta activo y cuando pulsen dicho boton cambie a otra imagen que saldra una corneta con una x que significa que la musica esta en silencio. Es posible con javascript?. Si me pudieran ayudar con el código.

#2 (**permalink**) 25/06/2013, 12:43

Encontre un codigo pero ahora me surge un inconveniente yo quiero que al hacer click en el boton para silenciar la musica cambie la image.

Este es mi código:

<script type="text/javascript">

window.onload = function(){
var audio = document.getElementById("audio");
var image = document.getElementById("onOff");

//autoplay
audio.play(); image.value = "pause";

//toggle
image.onclick = function(){
if(image.value == 'play'){
audio.play();
image.value = "pause";
}
else{
audio.pause();
image.value = "play";
image.className = "activo";
}
}
}
</script>

</head>
<body>

<input type="image" id="onOff" value="play" class=""/>

<audio id="audio" loop="loop">
<source src="sonido.mp3" type="audio/mp3">
</audio>

Style.CSS

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

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