Reproductor de musica en HTML5

Los reproductores comunes, normalmente necesitan adobe Flash para ser reproducidos en la web, es por eso la alternativa  que HTML5 nos ofrece, que mas adelante, en un futuro se volvera comun.

Ahora nosotros te mostraremos la estructura basica de un reproductor de musica en HTML, este codigo lo encuentran mucho si buscamos en google:

<audio id="audioplayer" controls>

  <source src="song.mp3" type="audio/mp3" />

  <source src="song.ogg" type="audio/ogg" />

</audio>

<script type="text/javascript">

    var audioTag = document.createElement('audio');

    if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {

        AudioPlayer.embed("audioplayer", {soundFile: "song.mp3"});

    }

</script>

Ahora como armariamos un repro con una lista de temas?

Para esto podemos valernos de HTML5 jQuery Player, como veran. gracias a la libreria jQuery y este plugin podemos obtener un reproductor igual a este:

 

Si quieres ver el demo y descargar el zip: LINK

Este codigo cuenta con varias opciones de configuracion y también puede especificar algunas opciones, como texto compra, número de pistas para mostrar y auto jugar ajuste.


Referencia: http://www.kabytes.com/general/reproductor-de-musica-html5/
Demo: http://www.codebasehero.com/files/music-player/demo/