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.
|
1 |
<audio id="sonido" src="la url de nuestro sonido"></audio> |
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().
|
1 2 |
<audio id="sonido" src="la url de nuestro sonido"></audio> <img src="imagen" onclick="document.getElementById('sonido').play()" /> |
Ejemplo HTML5:
audio HTML5
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
sonido_btn.addEventListener(MouseEvent.CLICK, fl_ClickToPlayStopSound); var fl_SC:SoundChannel; //This variable keeps track of whether you want to play or stop the sound var fl_ToPlay:Boolean = true; function fl_ClickToPlayStopSound(evt:MouseEvent):void { if(fl_ToPlay) { var s:Sound = new Sound(new URLRequest("http://www.helpexamples.com/flash/sound/song1.mp3")); fl_SC = s.play(); } else { fl_SC.stop(); } fl_ToPlay = !fl_ToPlay; } |
Ejemplo Flash:
[/kml_flashembed]
excelente !! me sirvio de mucho
No había una melodía más fea? XD gracias por el ejemplo
Era un loop que venía por defecto en Flash 🙂
y si le quiero dar stop, hay otro codigo??
Carlos, puedes usar la función pause()
y como le damos la funcion pause?
En ActionScript aquí hay un link
http://stackoverflow.com/questions/1211393/how-can-pause-play-embed-sound-in-as3-flash
y en HTML5
http://stackoverflow.com/questions/5721795/play-and-pause-one-html5-audio-element-at-a-time-via-jquery