1
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:
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="...:
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 = 'http://k003.kiwi6.com/hotlink/5b6r3mpa5k/coche.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>
#musica {height:0;width:0;}
</style>
<script type="text/javascript">
var sonido = 'http://k003.kiwi6.com/hotlink/5b6r3mpa5k/coche.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>
1 comentarios:
No funciona