Una de las tareas más comunes al momento de diseñar elementos interactivos dentro de un sitio web es reproducir audio en respuesta al click de un botón o una imagen.

Para muchos diseñadores y/o desarrolladores Flash esto es muy común e inclusive la nueva versión de Flash CS5 trae consigo pequeños snippets que facilitan mucho el trabajo, para todos aquellos que ahora quieran hacer lo mismo pero en HTML5 tenemos el siguiente ejemplo de audio en HTML5.

Insertamos un sonido en HTML5 mediante la etiqueta audio, y asignamos un id. Es muy importante asignarle un id porque controlaremos mediante el DOM el elemento y de esa manera asignaremos en javascript la función para reproducir sonido a un enlace o una imagen.

Posteriormente insertamos una imagen y la ligamos mediante una función de javascript para que pueda identificar el id del sonido y reproducirlo con la función play().

Ejemplo HTML5:

audio HTML5

Reproducir Sonido

NOTA: Tiene la desventaja que al ser un mp3 ciertos navegadores no podrán reproducirlo por el tema de codecs. Tendríamos que hacer una versión en ogg y otros formatos para hacerlo más compatible.

Y para la versión Flash es igual de simple, solamente abrimos Flash y utilizamos alguna de las bibliotecas de botones comunes para ahorrarnos algunos pasos. Posteriormente asignamos un nombre de instancia al botón, para el ejemplo utilizamos sonido_btn. Y aprovechando el panel de snippets de Flash CS5, de la categoría Audio and Video, utilizamos el snippet Click To Play/Stop Sound, que nos producirá el siguiente código.

Ejemplo Flash:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://activ.com.mx/wp-content/uploads/2010/11/sonido_flash.swf” width=”300″ height=”50″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]