Sonidos a demanda: con clic y con hover

Algunos parroquianos se han "quejado" de que en las versiones más modernas de Chrome, no funciona un código que publiqué anteriormente para reproducir sonidos al hacer clic o al pasar el puntero por encima de un botón. Como aquí estamos para solucionar problemas y no para provocarlos, pues he tenido que buscar un sustituto que esté a la altura.

Y lo encontré fácilmente en JavascriptKit, sitio con multitud de utilidades y del cual he extractado y traducido lo que viene a continuación. Vamos, un vil copy-paste-traduce en toda regla.

Pero antes una demo:

Haz clic Haz hover

---

El script utiliza el nuevo elemento audio de HTML5, que permite agregar fácilmente efectos de sonido. Como la cuestión es modernizarse, funciona en todos los navegadores que soportan esta evolución del lenguaje básico de la Red. Estas son todas las versiones iguales o superiores a IE 9, FF 3.5, Chrome 3, Safari 3 y Opera 10.5.

El uso de HTML5 para reproducir el audio evita que nos tengamos que preocupar por si el usuario ha instalado el plugin correcto o no. Si tiene uno de los navegadores anteriores funcionará.


La manera de instalarlo es la habitual, es decir, el JavaScrip con la función antes de </head> y la llamada a dicha función en el elemento dónde se quiere aplicar.

Esta sería la parte de la función:

<script type="text/javascript">
//<![CDATA[
// Definir lista de extensiones y el tipo de fichero de audio asociado. Puedes añadir más
var html5_audiotypes={
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //Comprobar soporte para audio HTML5
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/.(w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error('Su navegador no soporta audio HTML5')}}
}
}

//Inicializar sonidos
var hover1 = createsoundbite('https://googledrive.com/host/0B3b6MFUtZc42dzVwTEdJM1JwZHc/silbido.mp3');
var hover2 = createsoundbite('https://googledrive.com/host/0B3b6MFUtZc42dzVwTEdJM1JwZHc/claxon.mp3');

//Nótese que se pueden añadir ficheros con otras extensiones para mayor compatibilidad
var click1 = createsoundbite('https://googledrive.com/host/0B3b6MFUtZc42dzVwTEdJM1JwZHc/click.mp3','https://googledrive.com/host/0B3b6MFUtZc42dzVwTEdJM1JwZHc/clock.mp3');
//]]>
</script>

Y ya para crear el botón con sonido, será suficiente con añadir a la caja un evento onmouseover u onclick, aplicando la función playclick() al sonido deseado de entre la lista que hemos creado al final del script.

Aquí el código a modo de ejemplo, para hacerlo con un enlace o un div y respectivamente con clic y con hover:

<a href="javascript:void();" onclick="click2.playclip()">Efecto hover 2</a>

<div class="demo" onmouseover="hover2.playclip()">Hover 2</div></div>

Clic 2

Hover 2

Actualización

Me salté en la explicación una cosa bastante importante. Algunos tipos de archivos son sólo compatibles con ciertos navegadores y por eso el script permite poner el mismo archivo de sonido con distintos formatos dentro de la misma variable. De esta manera, si no funciona uno funcionará el otro. José GDF nos pasó este enlace de w3schools.com con una tabla dónde se puede ver el detalle navegador/fichero soportado y con un poco de lógica podréis comprobar que con usar .mp3 en combinación con .ogg, cubriremos todos los casos sin necesidad de usar todos los formatos.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter