Sonidos a demanda: con clic y con hover | Oloblogger Algunos parroquianos se han "quejado" de que en las versiones más modernas de Chrome, no funciona un código que publiqué anteriorm...

1 de diciembre de 2012

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:



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
Copy URL

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

follow us in feedly

54 comentarios :

  1. Gracias, Oloman. Ya lo había visto en sitios como CSSLab y me intrigaba cómo conseguirlo. Saludos :)

    ResponderEliminar
  2. donde subo musica mp3 ?????

    ResponderEliminar
    Respuestas
    1. Yo subí estos ejemplos a http://kiwi6.com

      Eliminar
    2. Yo introduje un archivo en local y lo reprodujo :)

      Eliminar
  3. Muy divertidos los ejemplos :DDD

    ResponderEliminar
  4. A mí, en tu demo, el click con retardo pero funciona pero en el hover no suena nada.

    ResponderEliminar
    Respuestas
    1. Pues a mi me pasa exactamente lo mismo...

      Existe una tabla de compatibilidades de archivos de audio por navegadores. Te dejo un enlace con un ejemplo. Te lo digo porque hace tiempo me armé un reproductor de audio, con los archivos alojados en DropBox (carpeta pública) o en Archive.org, y en el transcurso de mis "investigaciones" me encontré que todos los navegadores no son compatibles con mp3, por cuestiones de licencias, y otros no aceptan wav u ogg vorbis, por vete a saber qué otras razones.

      Tal vez ahí esté la clave de por qué a algunos no nos funciona un botón y el otro sí.

      Un saludo.

      Eliminar
    2. Exacto. Me comí esa explicación al redactar el post. Precisamente el "respaldo" que comento directamente en el código se refiere a eso.

      El del click os funciona a todos porque tiene añadidos un .mp3 y un .ogg y eso da cobertura a todos. Se puede comprobar en la tabla que enlazaste (gracias por cierto).

      El del hover sólo tiene un .mp3 por lo que en un principio no funcionará en FF ni en Opera.

      Tengo que retocar este post para explicarlo...

      Eliminar
    3. Hola de nuevo:

      Se me pasó el e-mail de la respuesta entre unas cuantas decenas de otros correos ni me enteré de que habías contestado. Ya veo que has añadido el enlace a la tabla.

      Un saludo y felices (lo que queda de) fiestas.

      Eliminar
  5. Sirve Para Wordpress? ...

    ResponderEliminar
    Respuestas
    1. En un principio sí, pues es JavaScript simple. Lo único es que no sé cómo lo tienes que incorporar a ese tipo de plantillas. Quizás igual que como comento aquí, pero realmente no lo sé.

      Eliminar
  6. Hola Oloman, antes que nada muchas gracias por compartir tus conocimientos. Esto esta sensacional y funciona muy bien en los diversos navegadores, sin embargo cuando pego los codigos en mis archivos estos no funcionan en IE, en el resto si. Incluso me permiti ver el codigo fuente de este articulo y tambien lo copie, obteniendo el mismo ressultado, no funciona en IE y en el resto de navegadores si. ¿Por casualidad existe algun truco para esto? Saludos

    ResponderEliminar
    Respuestas
    1. Pues el único truco es que depende de la versión de IE. En la 9 funciona, en las inferiores no.

      Eliminar
  7. Hola otra vez -.-" jaja merci por responder.
    No sé que pasa, es que lo copio y pego igual que está ahí pero me dice que:
    Error al analizar XML, línea 3137, columna 33: Element type "arguments.length" must be followed by either attribute specifications, ">" or "/>".
    Y lo estoy copiando = T^T

    ResponderEliminar
    Respuestas
    1. Prueba ahora que añadí unas etiquetas para que Blogger "trague" con el código del script.

      Eliminar
    2. VALE AHORA SÍ FUNCIONA (>.<)
      Solo hay un problema, (gracias por la ayuda en serio k sé k soy pesada), cuando paso el cursor por encima de la imagen se dispara el sonido pero cuando la saco de la imagen se vuelve a disparar el sonido, y si saco el cursor de la imagen antes de que acabe el sonido se corta y vuelve a empezar. Dónde está el error para que solo se escuche cuando toco la imagen y no cuando dejo de tocarla?

      Merci :)

      Eliminar
    3. ¿Enlace a la página dónde lo pusiste?

      Eliminar
  8. El código de la plantilla lo puse igualito a ese, y en enlace del sonido puse http://k007.kiwi6.com/hotlink/1v9ndqker0/escoge_uno.mp3 esto.
    El enlace del sonido a la imagen puse: lo que tú has puesto y he cambiado Hover 2 por una imagenhttp://3.bp.blogspot.com/-qDuGehy2uzo/URLmcZce5sI/AAAAAAAADNU/1-VGOBfLfw8/s1600/penny2.png
    El problema está que el sonido se reproduce tanto cuando entra el cursor en la imagen tanto cuando sale de ella, por lo que si sales antes de que acabe de reproducirse el sonido se corta y se vuelve a reproducir desde el principio -.-"

    ResponderEliminar
    Respuestas
    1. Necesitaría verlo ¿Me puedes pasar el enlace de la página dónde está?

      Eliminar
    2. http://jonia-anatolia.blogspot.com.es/2013/02/resenas-de-pasion-de-medianoche.html

      Eliminar
    3. Prueba a quitar ese div class='demo' que metiste y a dejar el código así:

      <div class="separator" style="clear: both; text-align: center;">
      <a onmouseover="hover1.playclip()" href="http://2.bp.blogspot.com/-rT_iwPxZat4/URLI5I9zO-I/AAAAAAAADMI/fQvSa3OfHHE/s1600/penny2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="198" src="http://2.bp.blogspot.com/-rT_iwPxZat4/URLI5I9zO-I/AAAAAAAADMI/fQvSa3OfHHE/s200/penny2.png" width="200" /></a></div>

      Eliminar
  9. hola, amigo sabes que no funciona en Internet Explorer, de todos modos esta muy bueno el el ejemplo ! gracias!

    ResponderEliminar
  10. Gracias por el aporte. tengo una pregunta.
    el código funciona bien, pero tengo un problema con el onClick

    Cuando no tengo ningún enlace en el Href me funciona bien, como aparece en este código
    < href="#" eventoonClick="clicksound.playclip()">texto

    pero si coloco algún enlace no reproduce el sonido
    < href="pagina2.html" eventoonClick="clicksound.playclip()">texto

    Qué puedo hacer? muchas gracias

    PDT= Coloco eventoonclik porque no estan permitidos los enlaces con onclick en este sitio

    ResponderEliminar
    Respuestas
    1. Pues no sé si es posible arreglarlo, pero tiene sentido que no funcione. A ver... si cuando pincho en un enlace me voy a ir a otra página ¿para qué quiero un sonido que no se va a reproducir porque precisamente el navegador está ejecutando otra orden (salir)? Creo que en el onmouse si debería funcionar ¿lo puedes confirmar?

      Eliminar
  11. Gracias por el aporte pero tengo una duda, me funciona en firefox,chrome, pero en safari nada q ver... a q se debe...

    ResponderEliminar
    Respuestas
    1. Pues a que Safari es muy raro ;) Leí que iban a cambiar a webkit, por lo que si es así, el problema desaparecerá. No obstante comprueba la nota al final del post por si fuera que estás usando un formato de fichero para el audio no compatible con Safari.

      Eliminar
  12. Hola Buenas Tardes Oloman gracias por tu aporte en realidad me a ayudado bastante, la duda que en este momento me consume es que quiero reproducir un archivo de audio WMA pero no se escucha, lo agregue dentro de los tipos de audio

    var html5_audiotypes={
    "mp3": "audio/mpeg",
    "mp4": "audio/mp4",
    "ogg": "audio/ogg",
    "wav": "audio/wav",
    "wma": "audio/wma"

    y declare un archivo .wma al ligar a una imagen pero al correrlo no lo reproduce, sabras si es posible agregar ese audio dentro del codigo para que lo reprodusca? ya que si pones un plugin por fuera con ese tipo de audio si lo reproduce.
    Por tu atencion muchas gracias salu2!!

    ResponderEliminar
    Respuestas
    1. ¿Viste la última nota de esta entrada? Puede que no funcione en determinado navegador, pero en otros sí debería. No obstante lo mejor es poner dos o tres formatos para no fallar con nadie.

      Eliminar
  13. Hola: Muy buenos tus aportes. Lo he insertado en páginas html y funciona pero solo al hacer el primer clic pero luego cuando vuelvo a hacer clic ya no ejecuta sonido. Habré hecho algo mal?
    Saludos.

    ResponderEliminar
    Respuestas
    1. Lo desconozco Arturo, pero no tiene lógica que sea un error tuyo. Quizás es tu navegador o que el sonido tiene una parte que no oyes pero que anda reproduciéndose todavía cuando intentas el segundo clic.

      Eliminar
  14. ¿Cómo se puede hacer para controlar el volumen?

    ResponderEliminar
    Respuestas
    1. Hola Facu. Esto es sólo un truquillo para poner un fichero de audio en el blog, no un reproductor. Con este podrías controlar el volumen con la instrucción audio.volumen. Si te interesa busca información sobre ese comando porque la verdad es que yo no estoy muy ducho con esto.

      Eliminar
  15. Saludos amigos excelente post me gustaria saber si en vez de alojar el archivo de sonido en un sitio web externo lo podria tener en una carpeta interna de un proyecto (estoy intentando hacer un sitio web en netbeans) gracias

    ResponderEliminar
    Respuestas
    1. Saludos Joselo. El fichero de audio lo puedes alojar dónde quieras pero tiene que estar accesible para la aplicación que estés haciendo. Si es para Internet tendrá que poder acceder cualquiera y en ese caso, de nada sirve en tu ordenador. Por eso hay que "publicarlo" en algún sitio.

      Eliminar
  16. Saludos Oloman. Mi aplicacion debe funcionar en una intranet yo podria alojar mi pagina web con todos los recursos de la misma en un servidor.local ¿Es posible que los clientes accedan a la misma sin tener que configurar rutas en el javascript? Gracias por tu ayuda

    ResponderEliminar
    Respuestas
    1. A ver, no tengo demasiada información, pero si debe funcionar en una intranet pues tendrá que estar accesible para esa intranet. Pero es lo mismo que con cualquier otro recurso compartido en esa intranet. Si lo alojas en el servidor local supongo que no tendrás problemas.

      Eliminar
  17. Este efecto le viene estupendamente al sistema de carpetas de mi blog. Podéis verlo aquí (que nadie se me asuste con el aviso de cookies antes de entrar al blog) http://www.geogebra-bloga.com/p/aurrebistadun-aurkibidea.html. Ha quedado perfecto. Lo he impletementado en muy poco tiempo. Lo que me ha costado más es encontrar un archivo con el volumen lo suficientemente alto...¡Gracias, Oloman!

    ResponderEliminar
  18. Muy agradecido hermano, tu publicación me ayudo mucho , mas sencillo imposible

    ResponderEliminar
  19. Muchísimas gracias por el aporte. Me ha sido muy útil.
    Un saludo.

    ResponderEliminar
  20. Como puedo hacer para que levante sonidos de forma aleatoria desde un directorio determinado.

    ResponderEliminar
    Respuestas
    1. Eso es algo que todavía no he probado Marcelo. Lo siento.

      Eliminar
    2. Que tal Oloman, las Ligas de los archivos en MP3 ya no estan disponibles, cress que me los puedas pasar por Correo o subirlos de nuevo ?

      Eliminar
    3. Asier Ruiz, tome como no tenia un Sonido Click , fui a tu pagina donde lo implementaste en https://dl.dropboxusercontent.com/u/40623199/click_one.mp3 , lo descargue y uso mi en una prueba de mi pagina que estoy desarrollando, Ahi viene el uso de Dos tipos de Sonidos para un Juego de Memoramas, estoy por subir mas Juegos,

      Asier, permiteme usar tu sonido clic de otra manera comentamelo y lo quito. Saludos.

      Eliminar
    4. No contesto por ya solucionado :)

      Eliminar
  21. http://clasetv.com/Memorias/Memoramas.aspx?Tipo=Frutas&Nivel=Basico

    ResponderEliminar
  22. amigo. cual es el codigo para enves de un boton sea una imagen?

    ResponderEliminar
  23. puff ya lo logre. me costo un poco pero listo. jejeje

    hay que editar un poco la fuente. jeje

    ResponderEliminar
  24. Muy buen post, me sacó de un problema, pero solo tengo una duda, ¿Es posible que al momento de darle click a algun otro botón o vinculo dentro de la misma página el audio que se este reproduciendo se detenga?

    ResponderEliminar
    Respuestas
    1. Pues no lo he probado, pero pienso que con PAUSE funcionará si lo incorporas a un nuevo botón:
      onclick="click2.pause()"

      Eliminar
  25. Excelente codigo me funciono de maravillas, lo utilice en un sistea de mensajes privados para emitir sonido de alerta al llegar el mensaje!! Muy buen codigo los felicito

    ResponderEliminar