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 JamendoAhora 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
Q bn, gran articulo
ResponderEliminarGracias :D
ResponderEliminar