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:
<
audio src="ruta/al/archivo" [
controls="controls"] [
autoplay="autoplay"] [
preload="preload"] >
Texto </audio >
(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>
<html>
<head>
<title>Reproductor HTML5
</title>
</head>
<body>
<audio src="music/example.ogg" controls="controls" >
Tu navegador no soporta el uso de la etiqueta de audio
</audio>
</body>
</html>
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>
<html>
<head>
<title>Reproductor HTML5
</title>
<script type="text/javascript"><!--
// Lista de archivos de musica
var music_list=new Array("goof","sandjorda","widibf","fuayfsilfm");
var now_playing=0;
var player,next_tag,tag;
function change_file(f,p){
p.setAttribute('src','music/'+f+'.ogg');
p.load();
}
function next(p,t,n){
change_file(music_list[now_playing],p);
p.play();
t.value=music_list[now_playing];
now_playing=(now_playing+1)%music_list.length;
n.value="-> "+music_list[now_playing];
}
-->
</script>
</head>
<body>
<br/>
<audio id="player" preload="preload" controls="controls" >
Tu navegador no soporta el uso de la etiqueta de audio
</audio ><br/>
<input type="text" readonly="true" id="this_tag" value="">
<input type="button" onclick="next(player,tag,next_tag)" id="next_tag" value="">
<script type="text/javascript"><!--
player= document.getElementById('player');
next_tag= document.getElementById('next_tag');
tag= document.getElementById('this_tag');
next(player,tag,next_tag);
-->
</script>
</body>
</html>
[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
