[HTML][MEDIO] Crear un reproductor de música utilizando HTML5

Crear un reproductor de música utilizando HTML5

El nuevo estándar HTML 5 nos proporciona nuevas etiquetas que facilitan mucho las cosas a la hora de crear nuestras aplicaciones. Una de ellas es la etiqueta "audio", que nos permitirá crear un reproductor de música para el archivo que le indiquemos.

El problema que tiene actualmente HTML 5 es que no todos los navegadores implementan todas sus funcionalidades, por lo que si decidimos hacer uso de esta etiqueta, debemos de asegurarnos que funcione en todos los navegadores, y para ello utilizaremos un reproductor basado en Flash como respaldo para aquellos navegadores que no interpreten las nuevas etiquetas HTML 5.

Para utilizar el tag "audio", solo debemos de hacer la llamada junto con el parámetro "controls". Dentro de la etiqueta, debemos de añadir el tag "source", donde se le indica la canción que debe de reproducir.

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

Con esto conseguiremos que el navegador cree un reproductor, y según el navegador que utilicemso, este tendrá una apariencia u otra.

Un problema que nos podemos encontrar, es que no se pueda interpretar la extensión que le hayamos indicado en el source. Para solucionarlo, podemos indicarle varias extensiones seguidas, hasta que encuentre una que pueda reproducir. Un ejemplo sería el siguiente.

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

Ahora para solucionar lo de las incompatibilidades de los navegadores, vamos a utilizar el reproductor WP Audio Player. La idea es mirar si se ha podido generar el reproductor mediante la etiqueta "audio", de no ser así, entonces se generará mediante este reproductor. El código quedaría de la siguiente forma:

<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>

De esta forma nos aseguramos de que en todos los navegadores se podrá reproducir el archivo que le indiquemos.