¿Cómo poner audios en HTML? Descubre la etiqueta <audio>

Descubre cómo agregar audio a tu sitio web con HTML de manera sencilla y efectiva. Aprende a utilizar la etiqueta de audio para reproducir archivos MP3 de forma rápida y fácil. Con ejemplos prácticos y consejos útiles, estarás listo para crear una experiencia auditiva envolvente para tus visitantes. ¡Haz que tu contenido cobre vida con sonido!

Sigue las palabras fuertes si quieres un resumen de todo el artículo.

– VENTAJAS Y DESVENTAJAS DE INSERTAR AUDIO EN HTML.

Aquí tienes algunas ventajas y desventajas de introducir audio en una página web:

Ventajas:

1. Mejora la experiencia del usuario:
   • El audio puede enriquecer la experiencia del usuario al agregar una dimensión auditiva a la página web, lo que puede hacerla más atractiva y agradable de explorar.
2. Comunicación efectiva:
   • El audio puede ser una forma efectiva de comunicar información, instrucciones o mensajes importantes de una manera más dinámica y memorable que el texto o las imágenes solas.
3. Mayor accesibilidad:
   • Para usuarios con discapacidades visuales, el audio puede ofrecer una forma alternativa de consumir contenido, mejorando así la accesibilidad de la página web.
4. Enriquecimiento del contenido:
   • El audio puede utilizarse para complementar y enriquecer el contenido textual o visual, proporcionando explicaciones adicionales, narraciones, efectos de sonido, música de fondo, etc.
5. Destaca ciertos elementos:
   • El uso estratégico de audio puede ayudar a destacar ciertos elementos de la página web, como llamadas a la acción, eventos importantes o contenido destacado.

Desventajas:

1. Puede distraer al usuario:
   • Un audio mal implementado o intrusivo puede distraer o molestar a los usuarios, especialmente si no pueden encontrar fácilmente cómo detenerlo o ajustar el volumen.
2. Problemas de accesibilidad:
   • Algunos usuarios pueden tener problemas de audición o simplemente prefieren navegar por la web en silencio, lo que hace que el audio sea menos accesible para ellos.
3. Aumento del tiempo de carga:
   • Los archivos de audio suelen ser más grandes que el texto o las imágenes, lo que puede aumentar el tiempo de carga de la página web, especialmente en conexiones lentas o dispositivos móviles.
4. Problemas de compatibilidad:
   • No todos los navegadores o dispositivos pueden ser compatibles con ciertos formatos de audio o características específicas de reproducción, lo que puede provocar problemas de visualización o reproducción del contenido.
5. Posibles problemas legales:
   • Algunos archivos de audio pueden estar sujetos a derechos de autor u otras restricciones legales, lo que puede limitar su uso en una página web sin obtener los permisos adecuados.

Al considerar la introducción de audio en una página web, es importante sopesar estas ventajas y desventajas para determinar si es apropiado y beneficioso para el contexto y el público objetivo de tu sitio web.

– CÓMO PONER AUDIO EN HTML. PASO A PASO

Para realizar estos pasos de agregar un audio en HTML de manera más profunda, te recomiendo leer el siguiente artículo sobre como descargar y usar VSCode, sobre todo el punto 4 donde explicamos paso a paso y con ejemplos como crear una página web simple, desde cero y visualizarla en un navegador como Google.

Si seguiste los pasos del punto 4 del artículo anterior que te invitamos a leer, te ayudará a entender mejor los siguientes pasos para agregar un audio en HTML:

Paso 1: Prepara el archivo del audio:

Antes de insertar un audio en tu página web, es importante preparar el archivo de audio adecuadamente. Aquí hay algunos puntos a considerar:

• Formato de archivo: Asegúrate de que tu archivo de audio esté en un formato compatible con HTML. Los formatos comunes incluyen MP3, WAV y OGG. Consulta la documentación de HTML para obtener una lista completa de los formatos compatibles.
• Calidad del audio: Elige la calidad del audio apropiada para tu uso; una calidad demasiado baja puede afectar negativamente la experiencia del usuario, mientras que una calidad muy alta puede aumentar el tamaño del archivo y el tiempo de carga de la página.
• Duración del audio: Considera la duración del audio y cómo afectará la experiencia del usuario. Los archivos de audio largos pueden ser adecuados para podcasts o música, mientras que los clips cortos pueden ser más adecuados para efectos de sonido o anuncios.
• Derechos de autor: Asegúrate de tener los derechos necesarios para usar el audio en tu página web. Evita usar música o contenido protegido por derechos de autor sin el permiso adecuado.
• Optimización del archivo: Si es posible, optimiza el archivo de audio para reducir su tamaño sin comprometer demasiado la calidad. Esto ayudará a que tu página web cargue más rápido y a mejorar la experiencia del usuario.

Tomarse el tiempo para preparar adecuadamente el archivo de audio garantizará una experiencia de usuario óptima cuando lo insertes en tu página web.

Paso 2: Crea una carpeta para tus archivos:

Cuando estás trabajando en un proyecto web y deseas incluir archivos multimedia, como audio, es una práctica común organizar estos archivos en una carpeta dedicada.

Para crear una carpeta para tus archivos multimedia, simplemente crea una nueva carpeta dentro del directorio de tu proyecto web y dale un nombre descriptivo, como «audios», «media» o «archivos_multimedia».

Luego, puedes colocar todos tus archivos de audio dentro de esta carpeta para mantenerlos organizados y accesibles mientras trabajas en tu proyecto. Por ejemplo:

En este ejemplo, mi_sitio_we/ es la carpeta principal y dentro están todos los archivos para crear una página web, incluido el archivo del audio que queremos introducir.

Paso 3: Introduce el código HTML para agregar el audio:

Para este paso, primero abrimos el editor de código fuente Visual Studio Code (nuevamente recomendamos leer el artículo relacionado a esta herramienta), y una vez que hayamos agregado la carpeta principal a VSCode con los elementos para crear la página web, ahora nos dirigimos al archivo index.html (este es el archivo con la estructura HTML de una página web).

Ahora, y una vez que hayas preparado el archivo de audio y creado una carpeta para tus archivos multimedia, es hora de insertar el audio utilizando HTML. Para ello, utiliza la etiqueta HTML de <audio> (este elemento va dentro de la etiqueta <body>).

Aquí dejo un ejemplo de como debería ser esta estructura y de donde debería ir el elemento <audio>:

Como podemos ver, el elemento que nos permite introducir el audio se encuentra dentro del <body> (cuadro azul). Ahora déjame explicarte que es y como usar la etiqueta <audio>:

1. <audio controls>: Esta es la etiqueta principal que define un elemento de audio en HTML. Aquí hay una descripción de cada parte:
   • <audio>: Indica que este es un elemento de audio.
   • controls: Este es un atributo HTML booleano que agrega controles de reproducción al reproductor de audio, como botones de reproducción, pausa, volumen y barra de progreso. Cuando se incluye este atributo, el navegador mostrará automáticamente los controles de reproducción junto al audio.
2. <source src="ruta_del_archivo_de_audio.mp3" type="audio/mpeg">: Esta es una etiqueta secundaria dentro de la etiqueta <audio>, y se utiliza para especificar la fuente del archivo de audio que se va a reproducir. Aquí hay una descripción de cada parte:
   • <source>: Indica la fuente del archivo de audio.
   • src="ruta_del_archivo_de_audio.mp3": Este es un atributo que especifica la ruta del archivo de audio que se va a reproducir. Debes reemplazar «ruta_del_archivo_de_audio.mp3» con la ruta real de tu archivo de audio (Por ejemplo, si el audio está dentro de una carpeta llamada «audios», la ruta relativa sería <source src=»audios/mi_audio.mp3″ type=»video/mp4″>.
   • type="audio/mpeg": Este es un atributo que especifica el tipo MIME del archivo de audio. En este caso, «audio/mpeg» indica que el archivo es de tipo MP3. Puedes cambiar esto según el formato de tu archivo de audio.
3. Tu navegador no soporta la etiqueta de audio HTML.: Este es el contenido de respaldo que se mostrará en caso de que el navegador del usuario no pueda reproducir audio HTML5. En este caso, si el navegador no es compatible con la etiqueta de audio HTML5 o el formato de audio especificado, mostrará este mensaje.
4. </audio>: Esta es la etiqueta de cierre para el elemento de audio. Indica el final del elemento de audio en HTML.

Paso 4: Guarda y visualiza:

Los pasos para visualizarlo en un navegador como Google son:

1. Guarda los cambios realizados: Una vez introducido el código HTML para el audio, guarda el progresos para lo cual puedes usar el atajo "ctrl + S". O dirigirte a "File" >"Save".
2. Visualiza tu trabajo en el navegador: Ahora, para poder visualizar la página, puedes:
   • Dirigirte al archivo index.html desde tu PC, y hacer doble clic en el y se abrirá automáticamente en tu navegador predeterminado.
   • O directamente desde V S Code, si estas usando la extensión de Live Server, puedes hacer clic derecho en el archivo de index.html desde el menú izquierdo de VSC, y luego en "abrir con Live Server" o en ingles "Open with Live Server".

Y listo, así es como puedes cargar un audio a tu página web desde HTML, ahora deberías verificar que el audio se haya insertado correctamente y se reproduzca según lo esperado.

ACLARACIÓN: Una vez agregado el audio, puedes cambiar su comportamiento y estilo usando atributos adicionales, CSS o JavaScript. A continuacion te dejamos alguno de los atributos mas usados en de la etiqueta <audio>.

– ATRIBUTOS DE LA ETIQUETA AUDIO Y SOURCE.

Aquí tienes una lista de los atributos más comúnmente utilizados para la etiqueta <audio> y la etiqueta <source> dentro de la etiqueta <audio>:

Atributos de la etiqueta <audio>:

1. controls:
   • Este atributo agrega controles de reproducción al reproductor de audio, como botones de reproducción, pausa, avance rápido y volumen. Es muy comúnmente utilizado para permitir a los usuarios controlar la reproducción del audio.
2. autoplay:
   • Este atributo hace que el audio se reproduzca automáticamente cuando la página se carga. Sin embargo, es importante usarlo con precaución, ya que puede ser molesto para los usuarios si se abusa de él.
3. loop:
   • Este atributo hace que el audio se reproduzca en un bucle continuo una vez que ha alcanzado el final. Es útil para música de fondo o efectos de sonido que deben reproducirse repetidamente.
4. preload:
   • Este atributo indica al navegador si debe cargar el audio cuando la página se carga (preload="auto"), solo cargar la metadatos del audio (preload="metadata") o no cargar nada (preload="none"). Esto puede ayudar a optimizar el rendimiento de la página web y reducir el uso de ancho de banda.

Atributos de la etiqueta <source> dentro de <audio>:

1. src:
   • Este atributo especifica la ruta del archivo de audio que se va a cargar. Debe incluirse dentro de la etiqueta <source> para cada formato de archivo de audio que desees admitir.
2. type:
   • Este atributo especifica el tipo MIME del archivo de audio. Debes proporcionar el tipo MIME adecuado para cada archivo de audio especificado en la etiqueta <source>. Los tipos MIME comunes para archivos de audio incluyen audio/mpeg, audio/wav, audio/ogg, entre otros.

Estos son los atributos más comúnmente utilizados para la etiqueta <audio> y la etiqueta <source>. Al utilizar estos atributos de manera efectiva, puedes controlar la reproducción del audio y garantizar una experiencia de usuario óptima en tu página web.

– TEN EN CUENTA LA ACCESIBILIDAD WEB AL SUBIR AUDIOS HTML

¿Qué es la accesibilidad web?

Se refiere a la práctica de diseñar y desarrollar sitios web y aplicaciones de manera que sean accesibles y utilizables por todas las personas, incluyendo aquellas con discapacidades. La accesibilidad web se logra mediante la implementación de estándares y pautas de diseño inclusivo, como las Pautas de Accesibilidad al Contenido en la Web (WCAG), que abordan aspectos como la percepción, operabilidad, comprensión y robustez del contenido web.

En el caso de los audio en HTML, esto se puede lograr utilizando el elemento <track> dentro de la etiqueta <audio>. Aquí tienes algunos detalles adicionales sobre cómo hacerlo:

1. Subtítulos (captions):
   • Utiliza el elemento <track> con el atributo kind="captions" para proporcionar subtítulos para el contenido de audio. Estos subtítulos pueden incluir descripciones de los diálogos y otros sonidos importantes en el audio. Por ejemplo:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track src="subtitles_en.vtt" kind="captions" srclang="en" label="English">
</audio>Lenguaje del código: HTML, XML (xml)

2. Descripción de audio (audio descriptions):
   • Si el contenido de audio incluye información visual importante que no se transmite a través del audio, puedes proporcionar una descripción de audio utilizando el elemento <track> con el atributo kind="descriptions". Por ejemplo:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track src="audio_description_en.vtt" kind="descriptions" srclang="en" label="English">
</audio>Lenguaje del código: HTML, XML (xml)

3. Transcripciones (transcripts):
   • Además de los subtítulos y las descripciones de audio, también puedes ofrecer transcripciones completas del contenido de audio. Esto proporciona a los usuarios una forma alternativa de acceder al contenido si no pueden escuchar el audio. Por ejemplo:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track src="audio_description_en.vtt" kind="descriptions" srclang="en" label="English">
</audio>Lenguaje del código: HTML, XML (xml)

Al proporcionar estas opciones de accesibilidad, estás haciendo que tu contenido de audio sea más accesible para usuarios con discapacidades visuales, lo que mejora la experiencia general de usuario de tu sitio web.

– CÓMO AGREGAR AUDIOS HTML DESDE WORDPRESS. PASO A PASO

Aquí tienes un paso a paso para agregar audios en WordPress utilizando el editor de bloques Gutenberg:

1. Inicia sesión en tu panel de administración de WordPress: Accede al panel de administración de tu sitio web utilizando tus credenciales.
2. Crea una nueva entrada o página o edita una existente: Puedes hacer clic en «Entradas» o «Páginas» en el menú lateral de WordPress y luego seleccionar «Añadir nueva» para crear una nueva entrada o página, o puedes editar una entrada o página existente haciendo clic en su título.
3. Accede al editor de bloques Gutenberg: Una vez que estés en la pantalla de edición de la entrada o página, verás el editor de bloques Gutenberg por defecto. Si no lo ves, asegúrate de que esté activado en la pantalla de edición haciendo clic en el botón «Usar el editor de bloques Gutenberg» en la parte superior derecha.
4. Agrega un bloque de audio: Haz clic en el símbolo «+» en la parte superior izquierda del editor para agregar un nuevo bloque. En el cuadro de búsqueda de bloques, escribe «audio» o desplázate hacia abajo hasta encontrar el bloque de «Audio» y haz clic en él para agregarlo a tu entrada o página.
5. Selecciona o sube el archivo de audio: Una vez que hayas agregado el bloque de audio, verás un área para seleccionar o subir tu archivo de audio. Puedes hacer clic en «Cargar» para subir un archivo de audio desde tu computadora o seleccionar un archivo existente de tu biblioteca multimedia haciendo clic en «Medios».
6. Configura las opciones del audio: Después de seleccionar o cargar el archivo de audio, puedes establecer opciones adicionales como el título del audio y si deseas que se reproduzca automáticamente o en bucle. Estas opciones pueden variar según el tema y los complementos que estés utilizando.
7. Ajusta la apariencia y configuración del bloque: Puedes personalizar la apariencia y configuración del bloque de audio seleccionándolo y utilizando las opciones disponibles en el panel lateral derecho o en la barra de herramientas superior del editor.
8. Guarda o publica tu entrada o página: Una vez que hayas terminado de agregar y configurar el bloque de audio, puedes guardar o publicar tu entrada o página haciendo clic en el botón correspondiente en la esquina superior derecha del editor.

¡Y eso es todo! Ahora has agregado con éxito un audio a tu entrada o página de WordPress utilizando el editor de bloques Gutenberg. Los visitantes podrán reproducir el audio directamente desde tu sitio web. Si tienes alguna pregunta o necesitas más ayuda, no dudes en preguntar.

PREGUNTAS FRECUENTES Y RESUMEN