jueves, 26 de mayo de 2011

Vagabundia

Vagabundia


Socorro: Sonidos en cualquier parte

Posted: 25 May 2011 08:00 PM PDT

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

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog