JMiur [E]

Que se puedan agregar sonidos a los enlaces quizás no es algo que me atraiga demasiado pero, por suerte, hasta ahora, era algo que estaba bastante limitado porque salvo Internet Explorer, el resto de los navegadores no poseían etiquetas para esto.

El problema, si es que uno ama algunos silencios, es que ahora, esas etiquetas comienza a estar diponibles y han dejado al viejo SOUND atrasado.

Tanto en IE9 como en Firefox, Chrome y Opera, la etiqueta en cuestión se llama AUDIO que es muy simple de usar aunque, como sigue siendo algo en desarrollo, las distintas empresas pelean para ver cual será el formato final que aceptarán y, por el momento no hay ninguno que sea universal y funcione en todos.

FormatoIE 9FirefoxOpera ChromeSafari
Ogg VorbisNOSISISINO
MP3SI NONOSISI
WavNOSISINOSI

Así que si uno quiere que se escuche algo, por lo menos hay que incluir dos formatos de archivos:
<audio controls="controls">
  <source src="URL_archivo.mp3"></source>
  <source src="URL_archivo.ogg"></source>
  este navegador no puede reproducir audio nativo
</audio>
Eso escrito tal cual, mostraría el reproductor pero, tal como se muestra en css-tricks.com, basta eliminar el atributo controls para que podamos reproducir el audio sin necesidad de tener visible ese reproductor y por lo tanto, usando JavaScript podemos agregar eventos a una etiqueta cualquiera. La idea del artículo se basa en el uso de jQuery y por lo tanto, queda limitada a quienes la tengan agregada pero, nada impide quedarse con lo elemental, colocar un ID a las etiquetas AUDIO y agregar todas las que uno necesitaría:
<audio id="sonido1" preload="auto">
  .......
</audio>
<audio id="sonido2" preload="auto">
  .......
</audio>
Como el evento que usaré es onmouseover, lo agrego al enlace o a la etiqueta que quiera que "suene":
<a href="#" onmouseover="hacerruido(1);"> probar el sonido </a>
probar el sonido
Y sonará porque hay una función que ejecuta el sonido:
<script>
function hacerruido(num) {
  var audio = document.getElementById("sonido" + String(num));
  audio.play();
}
</script>
Sólo espero que no lo utilicen en demasía
probar el sonido

14 comentarios:

Manuel Alberto  

La verdad que el segundo enlace tienta a probarlo varias veces... :D

Responder
Nico  

Yo quise probar el segundo pero tropecé con el primero y ahi me quedé :D

Responder
no  

jaja muy bueno :P

capaz que algún día lo uso :D

Responder
María José Moya  

Jajaja J.Miur, me he reido mucho. Al principio no entendía porque al pinchar los enlaces con IE9 no pasaba nada, pero al hacerlo en Firefox...! :D

Gracias por sacarnos unas sonrisas,

Responder
Unknown  

El segundo viene mejor :P

Ahhh amo el silencio, una página con varios y exploto!

Responder
HoracioNakama  

Buen recurso Todavía no le veo un uso razonable, pero seguro lo tiene.

Responder
elSant0  

Corroboro lo que dice Manfenix. Es que engancha :P

Responder
Gem@  

Como dice Graciela amo el silencio :D

Responder
Beben Koben  

wow...rolling-rooling :O

Responder
JMiur  

Se supone que en IE9 funciona pero, como no tengo ese navegador, no puedo confirmarlo; tal vez falte algo, lo desconozco.

"Todavía no le veo un uso razonable, pero seguro lo tiene. ESPERO QUE NO !!!!!!!! :-D

En realidad, sí lo tiene porque puede ser controlado con onclick y de ese modo, evita tener que usar reproductores de Flash que es lo que ahora hacemos cuando agregamos alguna clase de música.

Responder
Karla Castañeda  

jaja..Jmiur parece que a alguien le esta dando la chiripiorca XD

Salu2!

Responder
Jan  

Pues a mi, me ha venido de perlas!
Hice unos botones y un par de "portales" con efecto hover , pero le faltaba algo... era como si la plantilla fuese sordo-muda.
Gracias a ti, ahora mis botones tienen vida, parecen más reales :)

Muchas gracias maestro!

Responder
Unknown  

podrias pasar el codiigo completo del boton que reproduce un sonido cuando pasamos por el mause esk me urge un codiigo asii...y la verdd soy principiante en sto...t lo agradeceria muxo si lo proporsionas :)

JMiur  

El código es el que se muestra en la entrada.

Responder

¿Quiere dejar un comentario?

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

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