Insertando audio en nuestro sitio web

Seguimos insertando o agregando contenido multimedia a nuestro sitio web. Ya lo hicimos en la anterior clase donde aprendimos a insertar vídeos con HTML5 en nuestro sitio web, y continuamos en esta ocasión aprendiendo a agregar audios a nuestro sitio web. Desde luego vais a comprobar lo fácil que nos pone HTML5 insertar contenido multimedia en la actualidad. Por cierto, la etiqueta <audio> y la etiqueta <video> funcionan de una manera muy parecida y ambas comparten muchos atributos, así que lo aprendamos en esta clase también te resultará de utilidad para insertar archivos de vídeo en HTML5.

Pues bien, pongamonos manos a la obra con este tema, que la verdad no se va a alargar para nada. Como os comentaba, el proceso es muy similar al de la inserción de vídeo en HTML5, pero esta vez vamos a usar la etiqueta <audio src="TuAudio.Ext"></audio>. La etiqueta <audio> y la etiqueta <video>, podría decirse que son hermanas, ya que estas etiquetas comparten los mismos atributos. Como siempre el atributo src="" es obligatorio y va a contener la url o ruta de alojamiento, nombre y extensión del archivo de audio.

Los atributos de para la etiqueta <audio> son los siguientes:

• muted : Se encarga de silenciar los reproductores de audio


• controls : es un atributo booleano que nos permite disponer de un panel de control nativo de cada navegador para, obviamente, controlar la reproducción.


• loop : Este atributo, como su nombre indica, nos permite indicar si queremos reproducir el archivo en bucle. Nunca debe usarse en combinación con autoplay, sería una muy mala idea.


• preload : Sirve para precargar tus archivos de audio. Si no quieres que tus archivos de audio se precarguen, añádeles preload= "none". La precarga está bien si tienes uno o dos archivos, pero si tienes muchos va a ralentizar mucho la carga de tu página.

Mucho estoy hablando pero todavía no he puesto ni un ejemplo de su sintaxis. En mi caso solo uso el atributo controls, a no ser que por necesidad o peticion de un cliente, deba agregar algún atributo más como podría ser muted.

<audio src="audio/actual-fantasy.mp3" controls></audio>
<p>Actual Fantasy</p>

Como podeís comprobar he añadido un párrafo o etiqueta <p>, que es lo que se debe hacer para que cuando los rastreadores entren a leer nuestro sitio web, lo tengan más fácil. Por cierto si queréis y ya que viene a cuento, podéis darle un repaso a la clase Etiquetas, atributos y valores en HTML5. En esta clase encontraréis toda la información que necesitáis, no solo de la etiqueta <p>, si no de varias etiquetas y atributos básicos que te van a ayudar a seguir el curso.

Debemos tener en cuenta que el formato mp3 es quizás el más conocido y usado en internet, pero es de uso comercial. Tenemos el formato OGG Vorbis que es de libre uso y una muy buena opción. Si leiste la clase anterior, ya viste la tabla con los formatos de vídeo y audio que os deje con los formatos que debemos utilizar, pero aun así os la dejo otra vez por si a caso.

Formatos y codecs

Formato	Reproductor	Codec
OGG	Vídeo	Theora
OGG	Audio	Vorbis
WebM	Vídeo	VP8
WebM	Audio	Vorbis
MP4	Vídeo	H.264
MP4	Audio	AAC

Proporcionando múltiples archivos de audio

Para dar soporte a otros navegadores necesitaremos múltiples archivos de audio como pudimos ver con los vídeos. Como ya conocemos su sintaxis no voy a explicarlo. El atributo type="" no es necesario, pero va agilizar el trabajo del navegador. El navegador va a realizar una consulta al servidor para ver si puede reproducir el formato de audio y con este atributo le ahorramos esta consulta. Vamos a verlo a continuación y lo vais a entender enseguida.

<audio controls>
<source src="audio/actual-fantasy.mp3" type="audio/mp3">
<source src="audio/actual-fantasy.ogg" type="audio/ogg">
</audio>
<p>Actual Fantasy</p>

Reproductor de audio por defecto de Google Chrome puedes interactuar con él.

Conclusiones

Habeís comprobado por vosotros mismos, lo fácil que resulta insertar o agregar audios a nuestro sitio web.. Claro está que para los más veteranos en esto de HTML, no lo era tanto. Además todavía existen problemas de compatibilidad, aunque a medida que pasa el tiempo, van siendo menos.

Y con este post/clase hemos terminado con curso de HTML5 desce 0, al fin vamos a empezar a dar color a nuestra web. Lo se perfectamente, estaréis diciendo que quedan muchísimas cosas por explicar y aprender. Pero con este curso que hemos realizado, es mas que suficiente, para crear la estructura de la web y que además sea una web semántica, y con buena accesivilidad.

Cuando me vuelvas a leer, sera para empezar a aprender CSS3. El curso irá estructurado también por módulos, intentaré mejorar con la experiencia adquirida con este curso que recien hemos terminado. No se si me tomaré unos días de descanso o aprovecharé para actualizar y mejorar las clases del curso de HTML5, ya iré viendo.

Quiero daros las gracias a todos/as los que habéis estado ahí, aunque no comentéis ni participéis, las estadísticas que me arroja Google son buenas. Por favor, comparte este post para que otros puedan beneficiarse del contenido como has hecho tu. ¡HASTA LA PRÓXIMA!

Prohibida la distribución de este articulo incluyendo las imágenes,
sin la autorización del autor. Todos los derechos reservados ©2018