JMiur [E]

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] = "URL_sonido0.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.

29 comentarios:

CaTa  

Yo quiero esooooooooo :D

Responder
JMiur  

¿Plink plink, boing boing? ¿Click? :)

Responder
martin  

Realmente muy buenos!!! Muy buena aplicacion (http://www.martinvaresio.com.ar)

Responder
Pepiche  

Muy lindos sonidos,¿de aviones tenés?,jeje!

Saludos!

Responder
JMiur  

Jajaja, en este momento no tengo ninguno Pepiche pero, es cuestión de buscar ACÁ o ACÁ.

Upa: hay uno de un avión estrellándose :D

Responder
Pepiche  

Jaja,muy buenos!

Me gustó el del avión estrellándose :D

Responder
luis  

me parecio muy bueno tu script, pero tengo una inquietud, la cual q despues de varias pruebas no pude realizar, es con tu mismo codigo tratar de darle sonido a diferentes paretes de una misma imagen, poniendo las ligas del javascrip desde href=..., en una etuqueta, como esta
MAP name=mimapa, con sus respectiva s etiquetas de AREA, si me puedes ayudar muchas gracias

Responder
JMiur  

Luis: ¿Por qué no me envias el código por mail? Tal vez pueda encontrarse una solución.

Responder
Sharck_Bloody  

Hola, ¿habria alguna forma de que el sonido se ejecute al pasar el mouse por el elemento, sin tener que hacer click, como un efecto hover?

Responder
JMiur  

Si, utilizando onmouseover aunque el resultado dependerá del sonido. Como debe cargarse y ejecutarse, el efecto puede ser "lento".

Responder
Anónimo  

Muchas gracias, ya lo instalé y funciona perfecto. Una cosa que noto es que el sonido no es instantáneo sino que tarda unas milésimas en ejecutarse (lo noto inclusive en esta misma página) ¿será por el script mismo o que los mas instantáneos son los hechos con flash?

Responder
Anónimo  

jaja... mientras escribía el post sobre el atraso, vos estabas contestando exactamente lo que te comentaba. Justamente yo lo estaba aplicando para onmouseover. Si se te ocurre alguna manera de acelerarlo sería muy bueno. De cualquier manera, muchas gracias. Ana.

Responder
JMiur  

Lo único que puede hacerse es "precargarlos" pero, aún así hay un tiempo que es el que emplea el mismo navegador en procesar el sonido.

Responder
Raul  

¿Hay algún modo de hacer que se ejecute el sonido haciendo clic en cualquier parte del blog?

Responder
JMiur  

No sé. Lo dudo mucho. Tampoco sería muy agradable apra los visitantes :)

Responder
AreNithA  

oye disculpa y si utilizo firefox como le hago para tener efectos de sonido en los botones??? emmm soe principiante jajjaa se nota verdad? weno de antemano grax bye bye...

Responder
JMiur  

Para eso, deberías agregarle algún tipo de extensión o plugin a Firefox para que funcione con Windows Media Player. Fíjate acá.

Responder
Alvaro  

buff. Debo de estar ciego o algo, porque llevo 2 horas dandole vueltas al código y no paso del error que me da el debugger de firebug de:

missing ) after for-loop control

for (var i=0; i < sonido.length; i++)

Es como si cogiera el ; del &lt y lo tuviera en cuenta como delimitador del for.

Se agradece cualquier tipo de ayuda.

Saludos

Responder
JMiur  

Como no veo el ejemplo, no puedo responderte. Cualquier cosa, usa CDATA para evitar tener que cambiar esos caracteres prohibidos.

Responder
Alvaro  

No puedo poner codigo en los comentarios. Así que lo cuelgo aqui: http://www.lupok.com/errorScript.txt

Para cualquiera que este siguiendo el post.

Un saludo.

Responder
JMiur  

Si usas CDATA, debes colocar los caracteres < y >

document.write("<embed class='sonidoOculto' src='" +
sonido[i] +
"' autostart='false' id='" +
nombre[i] +
"' enablejavascript='true'></embed>");
}

Si usas Blogger, los archivos de sonido deben estar definidos como URLs absolutas:

sonido[0] = "http://................./s1.wav";

Responder
Alvaro  

Perfecto Jmur. Al cambiar por < en vez de & l t ; todo funciona correctamente. Muchas gracias por tu ayuda. Ojala le ayude a mas gente el hilo.

Un saludo.

Responder
miguel  

mi pregunta tonta de la semana, no se establecer una URL para encontrar el fichero de sonido mio

Responder
JMiur  

No sé dónde lo has alojado así que es imposible responder.

Responder
miguel  

He cambiado el script y ahora si que me funciona, gracias
Me pareces un fenomeno

Responder
Albus Dumbledore  

Jmiur esto era lo que andaba buscando pero lo he tratado de implementar y no me funciona, el asunto es que no entiendo muy bien tu explicación, podrías ser más explícito por favor...

Responder
Albus Dumbledore  

JMiur como te comenté anteriormente he intentado implementar esto «Enlaces con efectos (sonidos)» en mi blog pero no funciona, he probado en Internet Explorer y en Mozilla Firefox pero no pasa nada, he creado un nuevo blog y le he tratado de aplicar el efecto pero no logro que funcione.

Responder
JMiur  

Tendría que ver tu ejemplo para responderte.

Responder
ploner  

Muy bueno.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR