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