¿Cómo reproduzco audio de forma nativa con la etiqueta «audio»?

Reproducir audio de forma nativa en HTML5 es muy similar a cómo se incrustan vídeos, pero usando la etiqueta <audio>. Esto te permite añadir sonido a tus páginas sin necesidad de «plugins» externos.

1. La etiqueta <audio> básica:
   Puedes usar el atributo src directamente en la etiqueta <audio> para enlazar a un único archivo de audio.
   <audio src="mi_cancion.mp3"></audio>
   Al igual que con los vídeos, para asegurar la compatibilidad con diferentes navegadores, es mejor usar la etiqueta <source>.
2. Uso de la etiqueta <source> (recomendado):
   Esto te permite ofrecer varios formatos de archivo, y el navegador utilizará el primero que sea compatible.
   Los formatos de audio más comunes para la web son MP3, WAV y Ogg Vorbis.
   <audio>
<source src="mi_audio.mp3" type="audio/mpeg">
<source src="mi_audio.ogg" type="audio/ogg">
Tu navegador no soporta la etiqueta de audio. </audio>
   El texto que incluyas entre <audio> y </audio> (después de cualquier etiqueta <source>) se mostrará si el navegador del usuario no es compatible con la etiqueta <audio>.
3. Atributos importantes para <audio>:
   • controls: Es fundamental. Añade los controles de reproducción de audio predeterminados del navegador (como play/pausa, barra de progreso, control de volumen).
     <audio controls>
<source src="mi_audio.mp3" type="audio/mpeg">
</audio>
   • autoplay: Intenta que el audio comience a reproducirse automáticamente en cuanto se pueda.
     Ten cuidado: muchos navegadores modernos restringen el autoplay para evitar molestias al usuario, especialmente si no hay interacción previa en la página o si el audio no está silenciado.
   • muted: Silencia el audio por defecto.
   • loop: Hace que el audio se reproduzca continuamente en bucle.
   • preload: Sugiere al navegador cómo debe cargar el archivo de audio cuando se carga la página. Los valores posibles son:
     • auto: El navegador carga el archivo de audio completo si lo considera apropiado.
     • metadata: Carga solo los metadatos del audio (como la duración).
     • none: El navegador no precarga el archivo de audio. El audio solo se carga cuando el usuario inicia la reproducción.
4. Consideraciones de accesibilidad:
   Para el contenido auditivo, especialmente si es hablado, es una buena práctica proporcionar una transcripción del texto en la página.
   Aunque la etiqueta <track> (usada para subtítulos en vídeo) también se puede usar con <audio>, una transcripción visible suele ser más directa para la accesibilidad del audio.

Ejemplo completo:

<audio controls preload="metadata">
  <source src="mi_podcast_episodio1.mp3" type="audio/mpeg">
  <source src="mi_podcast_episodio1.ogg" type="audio/ogg">
  <source src="mi_podcast_episodio1.wav" type="audio/wav">
  Tu navegador no es compatible con la reproducción de audio HTML5.
  Puedes <a href="mi_podcast_episodio1.mp3">descargar el archivo MP3</a> en su lugar.
</audio>
Lenguaje del código: PHP (php)

Este ejemplo ofrece el audio en tres formatos diferentes para maximizar la compatibilidad, incluye controles para el usuario, sugiere al navegador que solo precargue los metadatos y proporciona un enlace de descarga como alternativa.