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>

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>

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

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