Música en HTML5

Actualmente si alguien va a hacer un reproductor de audio o de video, en lo unico que se piensa es en Flash, pero HTML5 tambien permite hacerlo... sin necesidad de un formato que consume muchos recursos y que suele funcionar mal si no se visualiza con software privativo.

HTML5, la nueva version (aun experimental, pero soportada por la mayoria de los navegadores) del lenguaje HTML, añade tags como "audio" o "video", de esta forma, como antes se hacian presentaciones de imagenes mezclando Javascript y HTML, ahora se puede hacer un reproductor completo.

Nota: al menos Firefox no soporta MP3, dado que esta patentado, la mejor alternativa (incluso mejor que MP3) es OGG, totalmente libre.

Nota[2]: ningun musico fue "pirateado"  en el proceso de escritura de este post, podeis encontrar musica libre en sitios como Jamendo

Ahora si, HTML5...

La etiqueta que se usa es:

(Lo que esta entre '[' y ']' es opcional) El texto solo se muestra si no se soporta la etiqueta audio ,seria algo asi como la etiqueta noscript

El significado de los atributos es: src: ruta al archivo (como con la etiqueta img) controls: se mostraran los controles: boton de reproducir, una barra de progreso.. autoplay: empezara a reproducirse tan pronto como pueda preload: se empezara a cargar el audio cuando se carge la pagina (se ignora si se utiliza autoplay)

Entonces, con un codigo minimo: <!DOCTYPE HTML>

Reproductor HTML5

Tu navegador no soporta el uso de la etiqueta de audio

Obtenemos esto:

No esta mal, eh? y eso usando solo HTML, el navegador hace todo el trabajo,añadiendo algo de Javascript se pueden hacer cosas como listas de reproduccion... <!DOCTYPE HTML>

Reproductor HTML5


Tu navegador no soporta el uso de la etiqueta de audio


[Referencias] Audio_-MDC Media_formats_supported_by_the_audio_and_video_elements-MDC Using_audio_and_video_in_Firefox-_MDC Introduction_to_the_HTML5_audio_tag_javascript_manipulation

untagged

Introduccion a la criptografia, con Python: RSA (II) » « Bajando OGG's de Jamendo