Reproductor de audio en HTML5

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Reproductor de audio en HTML5

Aunque la mayoría de los sitios se encuentran programados en php, el html ha encontrado la forma de convertirse en un estándar web pudiendo ser integrado a otros lenguajes fácilmente, por esa razón sus desarrolladores se han mantenido trabajando en su evolución constantemente, pero nunca alguna versión del lenguaje había causado tanta emoción como lo es html5, ya que esta vez incluyen una serie de nuevas etiquetas y atributos que pueden hacernos la vida más fácil a la hora de crear contenidos y entornos web bien sea para navegadores de escritorio o versión móvil, ya que los sistemas operativos que están en la vanguardia de la telefonía móvil soporta perfectamente la nueva versión. Si aún no has echado un ojo a lo nuevo de html5 o si quieres aprender desde cero entonces esta es tu oportunidad de aprenderlo, empezando por la última versión.

Evidentemente son muchas las grandes las mejoras incorporadas y por eso iré explicando de forma individual cada una de sus etiquetas para tratar de abarcar todos los aspectos necesarios y quede bien claro el uso y las funciones. Hare una explicación practica de cómo crear un reproductor de audio y unos ejercicios prácticos para que veamos cómo funciona.

La etiqueta audio (como su nombre lo dice) se utiliza para agregar música o sonidos a nuestros sitios sin la necesidad de incluir plugins o complementos a nuestros cms, no necesita flash ni javascript, solo con html5 y el reproductor será interpretado por el explorador.

Nota: El explorador debe soportar html5; es decir: “Opera, Mozilla, Chrome, Safari y Internet Explorer” todos en sus últimas versiones.

Bien, la síntesis de nuestra etiqueta es simple:

<audio></audio>

Como vemos empieza con (<) y termina con (>), luego cerramos la etiqueta para decir al explorador que el código del reproductor termina allí y eso lo hacemos incluyendo (/) antes de la palabra ‘audio’ en la etiqueta final. Así de fácil empezaremos a escribir nuestro código para incrustar un reproductor en nuestras entradas.

Lo segundo que debemos hacer es especificar los atributos de nuestro reproductor, para hacerlo tenemos varias opciones que debemos examinar para determinar cómo queremos que sea nuestro reproductor.

  • Autoplay: Permite que reproductor se inicie al entrar en la página.
  • Controls: Muestra los controles, si no agregas este atributo tu reproductor será invisible pero se podrá escuchar la música.
  • Loop: Permite que el audio se vuelva a reproducir después que termine y así continuamente.
  • Preload: permite que la pista de audio se cargue con anterioridad al cargar la página y así ahorrar tiempo de espera para empezar a reproducir.

La forma de agregar los atributos a la etiquetas audio será siempre con el signo (=) seguido del atributo dentro de (“”). Un ejemplo seria esta forma:

<audio controls=”controls”>

Podemos agregar varios atributos a la misma etiqueta, solo separamos con un espacio cada uno y siempre cerramos con (>)

<audio controls=”controls” autoplay=”autoplay”>

En el código que vimos tenemos nuestro reproductor visible y empezara a reproducir cuando el cliente acece a la página.
Lo que hacemos a continuación es decirle al reproductor donde buscar el audio y el formato de nuestro archivo a reproducir, eso lo haremos con la etiqueta (source) y sus atributos de esta forma:

<source scr=”audio.mp3” type=”adio/mp3” />

Como vimos en la misma etiqueta asignamos la ruta del archivo con su extensión y el formato del mismo para que pueda ser reproducido.
Ahora solo nos queda cerrar nuestra etiqueta de forma correspondiente como vimos al principio:

<audio controls=”controls” autoplay=”autoplay”>
<source scr=”audio.mp3” type=”adio/mp3” />
</audio>

Como medida prudencial y de información a quienes visiten nuestra página y su explorador no soporte el formato html5 dejamos un pequeño comentario dentro de las etiquetas (audio) ya que esta será mostrada solo por el explorador que no soportan la versión del lenguaje y así nuestros usuarios sepan que el problema está en sus exploradores obsoletos, esto lo hacemos con el mensaje que nos parezca más adecuado.

<audio controls=”controls” autoplay=”autoplay”>
<source scr=”audio.mp3” type=”adio/mp3” />
Tu explorador es demasiado antiguo para este reproductor, busca uno nuevo, ¡los gratis son los mejores!
</audio>

Ya tenemos listo nuestro código y puede ser insertado desde cualquier editor de texto en formato html de cualquier cms como joomla o wordpress. Así que si tu explorador es compatible con html5 podrás fácilmente ver el reproductor a continuación.

Debemos tener en cuenta que el diseño que mostrara nuestro reproductor será diferente dependiendo del explorador que use el cliente que acceda a la página.

Exploradores

Etiquetas:

Trackback desde tu sitio.

Comentarios (6)

  • Gyna

    |

    tengo varios audios y obviamente se auto reproducen en la pagina que atributo necesita para que no se autoreproduzcan ya que al accesar los auddios se escuchhan encimados.. y ese no es el objetivvo… que puedo hacer???

    Responder

    • Jose M Ramirez

      |

      Para que no se reproduzca automáticamente debes quitar el atributo (autoplay=”autoplay”) completamente del código.

      Responder

  • Roque

    |

    Existe la forma de editar este código para transmitir música en vivo!? o html5 no lo permite!?

    Responder

    • Jose M Ramirez

      |

      Transmitir en vivo es mucho mas complicado y require mas que HTML5, este es solo para musica alojada.

      Responder

      • Roque

        |

        Ah, genial! esta, te comento, porque he probado con el ip/port en este codigo, tal vez, se desvié un poco mi idea, de este tutorial, pero yo lo quería, porque tengo una radio online, y quisiera transmitir en vivo para celulares. Gracias igual por tu respuesta!!

        Responder

        • Jose M Ramirez

          |

          Si Roque, este codigo es muy sencillo y basico, es como iniciar la construccion de reproductores personalizados con CSS y jQuery pero te agradezco mucho el feedback!
          Saludos.

          Responder

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs