Aprendiendo HTML5     

Bueno compañeros, una de las cosas que mas me llama la atención de Html5 es la facilidad para compartir archivos multimedia, para tal fin esta nueva tecnología nos provee de las etiquetas de audio  «<audio></audio>»  y de vídeo  «<video></video>«.

Pues bien, estas etiquetas hacen el trabajo por si solas, sin la necesidad de acudir a tediosos plugin para lograr tal objetivo, así mismo no es necesario acudir al famoso Flash Player para poder reproducir contenido de audio y vídeo desde nuestro navegador :).

En este post voy hacer énfasis solamente en la parte del contenido de audio, en el siguiente post explicaré como se implementa la etiqueta de vídeo. Buenos pues vamos manos a la obra:

1) Creamos un proyecto en Netbeans al cual llamaremos multimedia, el cual nos debe quedar de la siguiente manera:

2) Ahora vamos a crear una carpeta nueva en nuestro proyecto, donde vamos a almacenar todo el contenido multimedia, para ellos hacemos lo siguiente:

3) Nos aparecerá la siguiente ventana en la cual colocaremos el nombre del folder o carpeta, dicha carpeta la voy a llamar audio, pero ustedes pueden darle el nombre que mas os guste.

4) Html5 aun no tiene estandarizado un formato de audio como tal, pero permite reproducir archivos de audio en formatos mp3, ogg y wav. Para este ejemplo voy a utilizar el más común el cual es el mp3.  Bien, ahora hay que agregar dicho archivo de música al folder de nuestro proyecto, dicha tarea la podemos hacer arrastrando el archivo hasta la carpeta, luego de esto les debe quedar de la siguiente manera:

5) Listo ya tenemos el archivo a reproducir, la canción que seleccione tiene nombre algo raro 🙂 … ahora procedamos a crear el reproductor desde Html5.

[cc lang=»html»]

Reproductor de Musica

[/cc]

Expliquemos que significa cada propiedad:

controls: Permite implementar los controles del reproductor por defecto como botón play-pause, volumen …

src: Indica la ruta donde se encuentra el archivo de audio que queremos reproducir.

preload: Permite que el archivo de audio cargue en el buffer de forma automática.

Autoplay: Reproduce automáticamente el archivo tan pronto como este listo por parte del buffer.

6) Ahora desde el navegador veamos como se visualiza nuestro navegador en acción 🙂