jueves, 11 de octubre de 2007

Enlaces con efectos (sonidos) - Vagabundia


Cuando me preguntaron si era posible colocar sonidos en los botones o en los enlaces, creí que me había sumergido en la máquina del tiempo y había regresado a los tiempos en que todo brillaba, todo se movía y todo hacía ruidos cuando abríamos una página web burla

Lo cierto es que una página puede tener sonidos, incluso en Blogger, ya sea como fondo que se ejecuta al cargarla o como resultado de una acción de los visitantes.

Esto, tiene varias limitaciones, la fundamental es que el navegador que utilicemos debe disponer de los plugins necesarios para reconocer los diferentes formatos de audio. En general, sólo Internet Explorer dispone de estos plugins por defecto por lo tanto, en cualquier otro, deberemos instalarlos de manera manual. Diría que en principio, el plugin de Quicktime es suficiente aunque también puede usarse su version alternativa que es mucho más liviana.

Los fondos de sonido sólo pueden utilizarse en Internet Explorer:
<bgsound src="URL_archivoSonido" loop="n">
donde el archivo de audio podrá estar en formato WAV, MID o incluso MP3 y el atributo loop tendrá como valor el número de veces que se debe ejecutar (-1 o infinite hace que se ejecute indefinidamente). Este atributo no es obligatorio, si se omite, sólo se ejecutará una vez.

¿Qué pasará en otros navegadores? Nada, ignorarán la etiqueta lo cual, desde mi punto de vista, es una verdadera ventaja ya que no recomendaría usar este tipo de cosas. La carga de una página se hace lenta y siempre deberíamos tener la consideración de darle al usuario la posibilidad de activar y desactivar el sonido.

Poner sonidos en enlaces o botones y que funcione en ambos navegadores no es menos complicado pero, por lo menos, es posible. Para que esto ocurra, debemos limitarnos a utilizar archivos en formato WAV.

Este es un ejemplo, basta hacer click en la imagen para que se ejecute el sonido:


Este es el código general que agregaremos a la plantilla justo antes de </head>:
<script type='text/javascript'>
// precargar los sonidos
var sonido = new Array();
sonido[0] = "http://simplythebest.net/sounds/WAV/sound_effects_WAV/sound_effect_WAV_files/cow.wav";
sonido[1] = "URL_sonido1.wav";
sonido[2] = "URL_sonido2.wav";;
// agregaremos todas las direcciones URL de los archivos de sonido a utilizar
sonido[n] = "URL_sonidoN.wav";

// nombres de los sonidos
var nombre = new Array();
nombre[0] = "suena1";
nombre[1] = "suena2";
nombre[2] = "suena3";
// le daremos un nombre único a cada uno de esos sonidos
nombre[n] = "suenaN";

function crearSonidos() {
for (var i=0; i &lt; sonido.length; i++)
document.write("&lt;embed class='sonidoOculto' src='" +
sonido[i] +
"' autostart='false' id='" +
nombre[i] +
"' enablejavascript='true'&gt;&lt;/embed&gt;");
}

function ejecutarSonido(cual) {
var elObjeto=document.getElementById(cual);
elObjeto.Play();
}

</script>

<style type='text/css'>
.sonidoOculto {
height: 0; width: 0; position: absolute; top: 0; left: 0;
}
</style>
Y luego, inmediatamente después de <body>, agregamos esto:
<script>crearSonidos();</script>
Al igual que con las animaciones, debemos precargar los sonidos para que estén disponibles inmediatamente, esto lo hacemos en la primera parte del script, guardándolos en una variable:

sonido[n] = "URL_sonidoN.wav";

donde n será un número consecutivo, comenzando con cero y el contenido, será la dirección URL donde hayamos alojado el archivo WAV.

También al inicio, asignaremos los nombres de los sonidos a usar que puede ser cualquier tipo de texto pero, debe ser único, es decir, no podrá haber dos sonidos con el mismo nombre; por ejemplo:

nombre[n] = "hacerClick";

Para reproducirse, el sonido requiere que haya un reproductor insertado en la página pero, como no queremos que se vea, le vamos a dar propiedades especiales con una clase llamada sonidoOculto. El reproductor, en realidad, los reproductores, uno para cada sonido, se crearán al inicio de la página pero permanecerán ocultos; esto es lo que hacemos con:

<script>crearSonidos();</script>

Ahora, lo único que faltaría hacer es utilizarlos.

Los sonidos, los colocaremos en los enlaces así que usaremos los llamados "eventos" para que se ejecuten. Por ejemplo, para que el sonido se reproduzca al hacer click, el código sería el siguiente:
<a href="URL_destino" onclick="ejecutarSonido('nombreSonido')">ENLACE</a>
donde el enlace podrá ser un texto o una imagen y nombreSonido es el nombre único que hemos definido en el script para el sonido que queremos ejecutar.

La otra posibilidad es utilizar el evento mouseover, de esta manera:
<a href="javascript:void(0);" onmouseover="ejecutarSonido('nombreSonido');">ENLACE</a>
Podemos utilizar el mismo sonido para diferentes enlaces:

SONIDO

O distintos sonidos en enlaces que tengan la misma imagen:


Sea cual sea el método que utilicemos, los efectos de audio deben ser incluido con mesura.




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Correo Vaishnava

Mi foto
Correo Devocional