Sonido al pasar el puntero por encima de una imagen | Oloblogger Este sistema hecho con JavaScript está desarrollado -a petición de un lector del blog- para añadir un efecto de sonido a una imagen, pero ta...

20 de octubre de 2011

Sonido al pasar el puntero por encima de una imagen

Este sistema hecho con JavaScript está desarrollado -a petición de un lector del blog- para añadir un efecto de sonido a una imagen, pero también se puede utilizar para reproducir música a demanda con un reproductor "invisible".

Lo primero de todo es conseguir un alojamiento para audio que admita el hotlink, o lo que es lo mismo, que nos permita tirar directamente del alojamiento para reproducir online y no sólo en modo descarga.

Servidor ha hecho las pruebas con Kiwi6 y parece que funciona bastante bien, con la ventaja de que ni siquiera es necesario registrarse. El que haya leído nuestro anterior post, podrá comprobar que últimamente nos ha dado por la Actinidia Deliciosa, pero es que somos así de dulces :)

El bloque principal lo he redactado de forma que se pueda poner como simple gadget (tipo HTML/JavaScript) en la barra lateral, ya que como os he anticipado, no habrá nada visible para el usuario. Veréis que no tiene mucha ciencia y que, secuencialmente, sólo se trata de lo siguiente:
  • un estilo para que el reproductor tenga tamaño cero y no se vea
  • una variable (sonido) para incluir en ella la dirección del sonido a reproducir
  • otra variable (audio) que contiene las instrucciones necesarias para embeber un reproductor estándar y unos parámetros para que no se reproduzca si no pulsamos antes en algún sitio (autoplay) y para que sea controlable desde JavaScript (enablejavascript)
  • la "impresión" en la página del reproductor para que quede cargado desde el principio
  • una función para comenzar a reproducir el sonido (reproducirmusica)

<style type="text/css">
#musica {height:0;width:0;}
</style>
<script type="text/javascript">
var sonido = 'https://googledrive.com/host/0B3b6MFUtZc42dzVwTEdJM1JwZHc/speeder.mp3';

var audio ='<embed id="musica" src="'+sonido+'" autoplay="false" type="audio/mpeg" enablejavascript="true"></embed>';
document.write(audio);

function reproducirmusica() {
var tocando = document.getElementById('musica');
tocando.Play();
}
</script>

Con esto instalado ya podemos activar ese sonido dónde queramos, siendo opción de vuestras necesidades si se hace al pasar el puntero por encima del elemento o si preferís que sea necesario hacer click.

En el primer caso, este sería el tipo de enlace que habría que montar englobando la imagen o lo que sea. Aquí hemos puesto sólo la palabra PLAY, pero justo después podréis ver el ejemplo que hemos hecho con una imagen cambiando esa palabra por el correspondiente <img src="...:

<a href='javascript:void(0);' onmouseover="javascript:reproducirmusica();">PLAY</a>



En esta imagen basta con pasar el puntero para oir el efecto



Para que sea necesario hacer click para la reproducción, el código iría de esta otra manera:

<a href='javascript:reproducirmusica();'>PLAY</a>

En esta imagen tienes que hacer click para oir el efecto

Al cargar la página con este script, puede que os salga un aviso de que se está intentando ejecutar un plugin y que tenéis que dar vuestro permiso, pero sólo se trata del reproductor por defecto del navegador, así que podéis aceptar su uso sin problemas.

Y no he sido muy afortunado con la elección del sonido del ejemplo, porque cuando parece que ha terminado, todavía queda un poco de pista a muy bajo volumen. Así que si le dais muy seguido y os parece que no funciona, no es por eso, es porque todavía está reproduciendo el final del anterior fichero. Vamos, que el coche no ha terminado de pasar...

¿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

60 comentarios :

  1. David, lo he probado con IE, Firefox y Chromes y funciona en los tres. Lo acabo de volver a comprobar y sigue funcionando ¿Qué navegador y qué versión usas?

    ResponderEliminar
    Respuestas
    1. yo utilizo opera y no oigo nada una lastima no se pueda poner para que se escuche con todos los navegadores que hay

      Eliminar
    2. Prueba con este otro sistema:
      http://www.oloblogger.com/2012/12/sonido-html5-click-hover.html

      Eliminar
    3. No se escucha nada, en ningun navegador, es mas lo probe a pesar de que blogger te advierte que este codigo no es compatible

      Eliminar
    4. Quizás sea algún plugin de tu navegador que no deja ejecutar esos ficheros o algo así David, pues sigue funcionando.

      Más abajo dices posteriormente que el código es bueno ¿?!!!

      Eliminar
  2. Jaja, vaya, me ha espantado pues tenía las bocinas a todo y no estaba escuchando nada jaja. Muy bueno el tip, gracias Oloman =)

    ResponderEliminar
  3. No, yo tampoco lo oigo. Uso Firefox en Windows 7.

    ResponderEliminar
  4. Gracias por el post, tiene muchas posibilidades.

    Duda: si lo pongo en mi blog ¿también les saldrá a las visitas el aviso de que se está intentando ejecutar un plugin?

    Saludos y gracias por tu labor.

    ResponderEliminar
  5. Fran Rodríguez y David, parece que sois los únicos que no lo oís ¿Tenéis JavaScript desactivado en vuestros navegadores?

    Daniel Cana, sólo sale si no tienen instalado el plugin de QuickTime, pero suele estar bastante extendido y muchos lo tienen.

    ResponderEliminar
  6. Oloman ! que buenos tips tiene tu blog.
    Me encanta.

    saludos

    www.ritrola.blogspot.com
    (Música, fotos, videos, retrosos 1960 y más.)

    ResponderEliminar
    Respuestas
    1. Quede alucinado con tu codigo, estaria bueno que lo publiques

      Eliminar
  7. GRACIAS POR EL APORTE pero tengo una duda:
    donde se pega el primer codigo especificamente XD

    ResponderEliminar
  8. Gracias Ritrola, pero la próxima vez te agradecería que no dejaras tu enlace de manera tan evidentemente publicitaria. Esta vez no he borrado el comentario porque me ha resultado ocurrente tu plantilla ;)

    El código está preparado para copiar y pegar en un gadget tipo HTML/JavaScript BŁΛÇЌ•ΛÇΣ™. Puedes añadir uno desde el apartado Elementos de Página del escritorio o desde Diseño si usas la nueva interfaz.

    ResponderEliminar
  9. Está todo perfecto, pero no logro que se escuche nada. Es más, dónde debería ubicar el segundo código? El que utilizo es que suene solo al pasar el ratón. Gracias!

    ResponderEliminar
  10. PD: Otra cosa, cuando ingreso a este post, logro escuchar el auto, pero no puedo repetir el sonido pasando el mouse sobre la primera imagen, que se supone debería escucharse. Me explico? ya estoy mareado. Un saludo!

    ResponderEliminar
  11. Todos Garcas, ya comenté que el audio que tomé fue una elección poco afortunada porque tiene un trozo (dos o tres segundos) casi sin volumen, lo cual hace que parezca que ha terminado sin ser así. Hasta que no termina de "reproducir" no sirve de nada volver a pasar el ratón porque no funcionará.
    El segundo trozo va dónde quieras que aparezca la palabra PLAY que es la que activará el sonido o en su lugar, una imagen.

    ResponderEliminar
  12. me gusto este truco ya que le da un toque flash a las imágenes mi problema radica que cuando lo quiero usar como un botón no me funciona el enlace.dejo un ej, de lo que quiero lograr aquí seria la primera parte del código (no permite ponerlo) aclaro el sonido sin problemas!! solo que queda como eso una imagen con sonido y mi enlace muere!! desde ya gracias

    ResponderEliminar
  13. lo del enlace en las palabras aquí seria etc no fue intencional! pero solo da a tu blog en todo caso..saludos! espero que mi "cagastellano" sea algo entendible

    ResponderEliminar
  14. NOTI Q-LOS, en el enlace, tendrías que añadir un document.location a continuación del reproducirmusica(). De esta manera:

    <a href="javascript:reproducirmusica();document.location.href='URL_DESTINO';">PLAY</a>

    Lo que ocurre es que el navegador se irá hacia el enlace tan pronto se pinche y justo después de EMPEZAR a reproducir el sonido. Es decir, no esperará a que termine por lo que este debe ser corto.

    Con la primera opción (ONMOUSEOVER) no existe este problema.

    ResponderEliminar
  15. Muchas gracias. Me ha funcionado de maravilla.

    Un saludo. Elena.

    ResponderEliminar
  16. Quíhubo Oloman. Estoy tratando de poner un gadget con esta variante; pero lo que sucede es que no sé dónde poner la url de la música que subí al hosting, ni dónde la imagen que también subí al hosting... Podrías ser más específico, por favor. Sinceramente no soy muy ducho con los temas javascript y html, por lo que me gustaría que, si te resulta posible, fueras un poco más detallado. Gracias

    ResponderEliminar
  17. Ya lo logré. Muchas gracias de todos modos.

    ResponderEliminar
  18. Oloman, gracias por responder. Tienes un blog muy didáctico, lo cual ya te han dicho muchas veces, pero no quería ser yo la excepción. Gracias, porque en él encuentro muchas herramientas que me sirven para seguir construyendo el mío. Mira, una pregunta o un comentario: Esta manera de reproducir audio sobre la imagen, solo se puede usar en una foto a la vez en la barra lateral derecha ¿Verdad? Porque intenté colocarlo en otro apartado con imagen y siempre se reproducía la primera... ¿Existe alguna variante para este código de modo que se puedan utilizar varios a la vez? Nuevamente gracias por todo lo que haces y encuentro en tu blog.

    ResponderEliminar
    Respuestas
    1. Este otro truco reproduce varios sonidos distintos. Ahora parece que no pita pero es sólo porque los ficheros .mp3 no están ya en el alojamiento que los tenía.

      Sin embargo, para lo que quieres tendrás que adaptarlo, ya que lo que hace es reproducir un sonido aleatorio y no uno en concreto. Además lo hace simplemente pasando el ratón por ciertos puntos de la pantalla, cada 150px en vertical exactamente.

      Eliminar
  19. Excelente - funciona de MARAVILLA

    ResponderEliminar
  20. Hola que tal? madre mia que no me salgo... Oloman yo lo que quiero es la opcion de pasar el mouse por encima de la foto, tengo una pagina en sites de google y lo estoy haciendo con la opccion de "insertar cuadro HTML" alli pego el codigo largo y cambio el enlace del sonido ya que abri una cuenta en kiwi6 ahora bien te agradeceria me pudieras poner el codigo "<img src="...:" completo suponiendo que mi foto se llame museo y donde colocaria ese segundo codigo a) en el mismo cuadro que coloque el codigo largo y entre que lineas? o tengo que abrir un nuevo cuadro HTML o no me funcionara en sites?. Tengo un poco de lio y te agradecere me ilumines. Un saludo y felicidades por el excelente blog. david.

    ResponderEliminar
  21. aclaro más: los objetos donde se quiere que al pasar el ratón se reproduzca sonido son unas fotos que ya estan enlazadas a una web. solo puse http://....

    ResponderEliminar
  22. Oloman logre en el blog poner musica sin ningun problema incluso poner imagen que es lo que la mayoria hacemos pero sigo sin poder hacerlo en sites con imagenes que tengo ya puestas en la web y localice un apartado de secuencias de comandos de Apps en (administracion de sitio)...en fin seguiré intentando.

    ResponderEliminar
    Respuestas
    1. Estas instrucciones son para un blog Blogger. No sé exactamente cómo funcionan los sitios creados con Google Sites, pero tiene que haber algún lugar dónde puedas grabar la parte del script (la primera). Hace tiempo publiqué esto y seguramente sea igual.

      Luego en el código HTML de la página habría que incluir al principio
      < script type="text/javascript" src="DIRECCION_FICHERO_JS" />.

      La parte de enlazar las imágenes hacia esa función no cambiaría.

      Eliminar
    2. muy amable pues vere si me funciona. Gracias.

      Eliminar
  23. Hola,
    Una duda, he puesto el efecto sobre un enlace, pero si le pongo el efecto ya no me funciona el hipervínculo que tenia, porque el comando href tiene prioridad en el efecto.. no tengo mucha idea de html, alguien me puede ayudar?

    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. No puede haber dos enlaces o mejor dicho, dos acciones distintas para el clic. O enlazas o ejecutas el JavaScript. ¿Por qué no usas la opción de pasar el puntero por encima (onmouseover) y reservas el enlace para tu destino?

      Eliminar
  24. Un favorsote Oloman :)... hay Algun boton para apagar lo que se esta reproduciendo....????? o apagar el audio cuando el mouse se quita de encima...MUCHASS GRACIAS ANTES QUE NADA... :D :D :D

    ResponderEliminar
    Respuestas
    1. Con este sistema no, pues lo que hace es "arrancar" un mp3 y hasta que no se reproduce entero no para. Depende de para qué sea la solución sería usar un sonido muy muy corto.

      Eliminar
    2. bueno estuve leyendo algo y encontre esto :)

      tocando.Stop(); a la variable que creaste le puedes dar stop, bueno esto solo lo he probado en internet explorer y me ha funcionado, Oloman tmbn quisiera que me ayudaras a subir el ejemplo de un videojuego que he hecho a mi blog la la verdad no tengo ni la nemor duda de como hacerlo eejeje Gracias espero tu respuesta.

      Eliminar
    3. ¿En que lenguaje hiciste el video-juego?

      Eliminar
  25. Hola buenos días.

    Versión 23.0.1271.64 m esta es mi versión de chrome, tmbn no lo reproduce, cuando lo tengo en autoplay, lo realiza(
    var audio =''; )

    Pero de ser de otra forma no lo escucho.

    ResponderEliminar
    Respuestas
    1. Por cierto ya te agradecí dando click en tus anuncios publicitarios :)

      Eliminar
    2. He tardado "un poco", pero hoy he publicado cómo hacerlo con un sistema más moderno ya que este no funciona en las nuevas versiones.

      Eliminar
  26. Disculpame, pero es que mis conocimientos sobre esto son muy básicos, me podrías indicar donde se pegan esos códigos?

    ResponderEliminar
    Respuestas
    1. El primer trozo (estilo+script) irían antes de </head> y el enlace (uno u otro, según prefieras) en dónde quieras que salga: en una entrada, en un gadget de la barra lateral, pie de página, etc.

      Eliminar
  27. Hola :)
    No sé nada de informática y he intentado instalar esto en mi blog pero esk no hay manera. Lo copio, lo pego y cambio el link del sonido por el mío pero me da a mí k no es así, pork tampoco sé donde poner el link de la imagen T^T Cuando se carga el blog, me sale una página blanca y un mini reproductor VCL k tampoco se oye...
    Podrías poner los comandos sin abreviaturas ni nada como, un ejemplo y poner "link de img" y "link de sonido" para k sepa donde va cada cosa?? Plis

    Gracias por el post!

    ResponderEliminar
    Respuestas
    1. Hola Jonia. Prueba primero a copiar mi código y comprueba que te funciona. Luego sustituye sólo mi fichero de sonido por el tuyo. Si no va ya sabes que es que no estás tomando bien el enlace del sonido o bien el sitio dónde está alojado no permite que hagas hotlinking (tirar de un fichero desde un sitio externo).

      Una vez logres eso, para poner una imagen como enlace en lugar de un texto, sólo tienes que teclear en lugar de este (del texto) algo como esto:
      <img src="DIRECCION_IMAGEN"/>

      Publiqué hace poco otro sistema más moderno y aunque el código es algo más largo, quizás la explicación de esa entrada te resulte más cómoda. Es este:
      http://www.oloblogger.com/2012/12/sonido-html5-click-hover.html

      Eliminar
  28. hola amigo, genial esto quise consultarlo y esta pagina fue la mejor, tengo una duda, puedo hacer que algún sonido o canción que yo escoja se reproduzca automáticamente cuando abra o inicie mi pagina? y de ser posible como puedo hacerlo?creando así mismo quizás un botón o link como el de "play" y otro de "stop" para dejar de reproducir

    ResponderEliminar
    Respuestas
    1. ¿Ves en el código un AUTOPLAY? Pues si cambias ese valor a TRUE, al cargar la página se ejecutará automáticamente el sonido.

      Con respecto al stop, no lo he probado, pero supongo que sólo es cuestión de añadir bajo la función reproducirmusica(), otra como esta:
      function pararmusica() {
      var tocando = document.getElementById('musica');
      tocando.Stop();
      }

      Luego ya creas un botón que llame a esa segunda función.

      Por si te interesara, mira también este otro post

      Eliminar
    2. gracias, eres genial.... olle es que no se mucho, como puedo hacer una pagina con un contenido en la mitad y que a los lados quede en blanco o ahí pueda poner cualquier imagen y que luego cuando yo baje o me desplace hacia abajo se me desplace ese contenido de la mitad y lo de los lados siga igual... tienes algún tutorial o me podrías ayudar? Gracias...

      Eliminar
    3. No exactamente para eso, pero el truco está en usar FIXED con la caja que no quiera que se mueva: Position

      Eliminar
    4. gracias, :) olle y la caja puede o es la misma divicion que yo haga dentro de la pagina? como por ejemplo una pagina dividida en izquierda, derecha y centro, usando div ?

      Eliminar
    5. Es difícill concretar sin que me ofrezcas un código concreto pero se puede fijar cualquier caja. Todo es cuestión de que las que forman la estructura de la caja estén bien ordenadas.

      Eliminar
    6. si ya lo resolvi amigo gracias :) , tu respondes mensajes privados en twitter?

      Eliminar
  29. Disculpa tengo un problema... antes me podia reproducir muy bien en chrome y firefox... pero ahora tengo problemas con firefox porque no me reproduce el sonido pero chrome si :S ... que pudo haber pasado D: ... fue de la noche a la mañana >_>

    ResponderEliminar
    Respuestas
    1. Lo acabo de comprobar y el sistema sigue funcionando en Firefox. Prueba esta misma página en tu Firefox. Si funciona es que sí cambiaste algo aunque fuera sin querer. Si no funciona entonces es cosa de tu propio navegador y desde el de otra persona seguramente veas que sí va bien.

      Eliminar
  30. Hola! Muy interesante!
    Tengo una pregunta:
    Seria posible agregar un efecto flash al pasar el cursor por encima de las "imagenes de los post" en blogger?
    Espero me puedas ayudar por favor! Gracias anticipadas. :)

    ResponderEliminar
    Respuestas
    1. ¿En qué consistiría ese efecto flash, en la ejecución de un fichero .swf o te refieres a otra cosa?

      Eliminar
  31. Oloman esta excelente pero al querer poner la imagen no puedo

    ResponderEliminar
  32. veo tu ultimo comentario fue hace 7 años, espero aun sigas con tu blog

    ResponderEliminar