Audio HTML

La lección de video enseñó clips con imagen. Audio es el primo solo de sonido: podcasts, notas de voz, intros de lección y efectos cortos. El elemento es audio. Empieza con controls para que la gente reproduzca a su ritmo — la misma cortesía que en video — sin poster, cuadro visual ni caja de video reservada. Una barra delgada obtiene un archivo de media/ y deja el diseño más calmado que un clip completo.

Qué hace audio

audio pide al navegador obtener un archivo de sonido y mostrar un reproductor compacto. Puedes poner un archivo con src o listar varios hijos <source> para que el navegador elija un formato que entienda. No hay lienzo visual como en video; con controls suele verse una barra delgada. La línea de tiempo, el silencio y el volumen siguen importando porque el sonido interrumpe una habitación tranquila igual que un video alto. Trata el reproductor como una herramienta que opera el visitante, no como fondo que se inicia solo.

Respuesta directa

Escribe <audio controls src="sound.mp3"> o anida varios <source> para formatos como MP3 y Ogg. Incluye texto de respaldo corto (y opcionalmente un enlace de descarga) dentro del elemento. Prefiere archivos comprimidos para la web. Evita el autoplay sorpresa con sonido. Si el clip enseña con habla, planifica una transcripción o notas claras junto al reproductor.

Formatos que ve un principiante

No todos los navegadores prefieren el mismo códec. Los principiantes suelen empezar con MP3 y añadir Ogg como segunda opción. WAV sirve para editar en el PC pero a menudo es demasiado grande como única copia web. La tabla es un mapa práctico de inicio — no una enciclopedia de códecs.

Audio simple con controls

Un MP3 corto más controls basta para muchas páginas de práctica. Coloca el archivo bajo media/, verifica la ruta como con las URL de imagen. Si aparece la barra pero no reproduce, abre las herramientas de desarrollo o prueba la URL del archivo — las rutas rotas fallan en silencio.

Lectura del ejemplo simple

• controls muestra reproducir, pausar, buscar y a menudo volumen
• src apunta al archivo relativo a la página (aquí bajo media/)
• El texto interior es respaldo cuando el elemento no puede reproducir
• No hay poster aquí — eso pertenece a video
• Para una barra de audio básica normalmente no necesitas width como en video

Varias fuentes y enlace de descarga

Listar Ogg y MP3 con valores MIME en type mejora la probabilidad de un candidato reproducible. El orden importa: el navegador recorre la lista hasta encontrar algo que pueda decodificar. Un enlace de descarga ayuda si falla la reproducción o si alguien quiere guardar. Al exportar dos formatos, mantén el mismo contenido de lección en cada archivo.

Lectura del ejemplo multi-fuente

• Las fuentes se prueban en orden hasta que el navegador encuentra una reproducible
• type ayuda a saltar formatos no soportados rápido
• El enlace de descarga es respaldo humano dentro de audio
• Mantén nombres y carpetas exactos — un typo en src parece un “reproductor roto”
• Aún puedes usar un solo src en demos pequeñas; multi-fuente es la mejora de robustez

Respeta oídos y ancho de banda

El autoplay con sonido sin una acción clara del usuario a menudo se bloquea y suele ser grosero. Sin controls, el visitante no puede pausar con honestidad. Un WAV largo sin comprimir desperdicia datos móviles cuando un MP3 compacto enseña lo mismo. Exporta audio de tamaño web como exportas video web. La música de fondo más adelante es otra decisión de diseño con consentimiento y silencio — no el valor por defecto de una lección para principiantes.

Transcripciones cuando el habla enseña

Si el clip explica un concepto con palabras, planifica una transcripción o notas claras en la página. audio no usa alt como img. La accesibilidad del habla es alternativas de texto, encabezados claros cerca del reproductor y control del usuario — no una imagen poster. Incluso un párrafo corto que reformule el consejo hablado ayuda a quien no puede escuchar ahora.

Audio frente a video frente a embeds

• Archivo de sonido autoalojado → audio
• Clip autoalojado con imagen → video
• Página de reproductor de otro sitio → a menudo iframe (lección posterior sobre embeds tipo YouTube)
  No metas un podcast en video solo porque viste controls allí primero. No envuelvas un MP3 local en un iframe cuando basta audio. Empareja el elemento con el tipo de medio.

Práctica en el editor

1. Añade un .mp3 corto bajo media/ (diez a treinta segundos bastan).
2. Insértalo con audio controls y ruta relativa correcta.
3. Reproduce, pausa, busca y ajusta volumen con la UI del navegador.
4. Opcional: añade un segundo tipo source y un enlace de descarga.
5. Escribe una frase de transcripción o notas junto al reproductor si el clip habla.
6. Comprueba que la página aún tenga sentido si nadie pulsa play.

Errores fáciles

• Autoplay con sonido sin acción clara del usuario
• Falta de controls
• Enlazar un WAV enorme sin comprimir cuando basta un MP3
• Esperar poster en audio
• Olvidar texto de respaldo o ruta de descarga
• Confundir embeds iframe tipo YouTube con archivos audio autoalojados
• Contenido hablado distinto en cada source al probar formatos
• Ruta media/ rota y culpar al navegador

Resumen

• audio inserta archivos de sonido que tú alojas
• Usa controls para que el visitante reproduzca, pause y busque
• Varios formatos source con type mejoran el soporte
• Prefiere archivos comprimidos y reproducción iniciada por el usuario
• Planifica transcripción o notas cuando el habla lleva la lección
• Audio para sonido, video para imagen+sonido, iframe para reproductores ajenos