HTML5 Etiqueta de audio

¿Este artículo fue útil para ti? 🙂
1.👉 Suscríbete gratis aquí.
2.👍 Comparte este artículo en tus redes sociales.
3.🔔Deja un comentario.

html5-logo-pequeno  Aprendiendo HTML5     html5-logo-pequeno

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:

php netbeans

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

folder netbeans

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.

 netbeans folder

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:

audio html5

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.

1
2
3
4
<h1>Reproductor de Musica</h1>
<audio src="audio/Me Tiene Coleto.mp3" controls="controls" autoplay="autoplay" preload="">
Tu navegador no soporta esta caracteristica.
</audio>

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 🙂

reproductor html5

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *