English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de HTML

Medios HTML

Manual de referencia HTML

HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

Audio HTML

El sonido se puede reproducir de diferentes formas en HTML.

Problemas y soluciones

¡No es fácil reproducir audio en HTML!

Necesitas dominar una gran cantidad de habilidades para asegurar que tus archivos de audio se reproduzcan en todos los navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera) y en todo tipo de hardware (PC, Mac, iPad, iPhone).

En este capítulo, el tutorial básico resume problemas y soluciones.

Uso de complementos

Un complemento de navegador es un pequeño programa de computadora que amplía las funciones estándar del navegador.

Los complementos se pueden agregar a la página utilizando la etiqueta <object> o la etiqueta <embed>.

Estas etiquetas definen contenedores de recursos (generalmente recursos no HTML), según el tipo, se mostrarán por el navegador o se mostrarán por complementos externos.

Se utiliza el elemento <embed>

La etiqueta <embed> define un contenedor de contenido externo (no HTML)。（ Esto es un HTML5 La etiqueta, en HTML4 Es ilegal en, pero es válido en todos los navegadores).

El siguiente fragmento de código puede mostrar MP incrustado en la página web3 Archivo:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Manual básico(oldtoolbag.com)</<title>　
</<head>
<body>
<object　height="50" width="100"　data="/correr/html/horse.mp3></object>
<p>Si no puede escuchar el audio, es posible que su computadora o navegador no admita el formato del archivo.</p>
<p>o no ha abierto el altavoz.</p>
</body>
</html>
Prueba y ve si ‹/›

Problema:

  • La etiqueta <embed> en HTML 4 Es inválido. La página no puede pasar por HTML 4 Verificación.

  • Los navegadores admiten diferentes formatos de audio.

  • Si el navegador no admite el formato del archivo, no se puede reproducir el audio sin complemento.

  • Si el usuario no ha instalado el complemento, no se puede reproducir el audio.

  • Si se convierte el archivo a otro formato, no se puede reproducir en todos los navegadores.

Se utiliza el elemento <object>

La etiqueta <object tag> también puede definir un contenedor de contenido externo (no HTML).

El siguiente fragmento de código puede mostrar MP incrustado en la página web3 Archivo:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Manual básico(oldtoolbag.com)</<title>　
</<head>
<body>
<object　height="50" width="100"　data="/correr/html/horse.mp3></object>
<p>Si no puede escuchar el audio, es posible que su computadora o navegador no admita el formato del archivo.</p>
<p>o no ha abierto el altavoz.</p>
</body>
</html>
Prueba y ve si ‹/›

Problema:

  • Los navegadores admiten diferentes formatos de audio.

  • Si el navegador no admite el formato del archivo, no se puede reproducir el audio sin complemento.

  • Si el usuario no ha instalado el complemento, no se puede reproducir el audio.

  • Si se convierte el archivo a otro formato, no se puede reproducir en todos los navegadores.

Se utiliza HTML5 La etiqueta <audio>

HTML5 La etiqueta <audio> es un elemento HTML5 elemento, en HTML 4 Es ilegal en, pero es válido en todos los navegadores.

El elemento <audio> 　 funciona en todos los navegadores modernos.

Compatibilidad del navegador

El número en la tabla indica la primera versión del navegador que admite la propiedad.

elementoChromeIEFirefoxSafariOpera
<audio>4.09.03.54.010.5

A continuación, utilizaremos la etiqueta <audio> para describir MP3 El archivo (válido en Internet Explorer, Chrome y Safari), también se agregó un archivo de tipo OGG (válido en navegadores Firefox y Opera). Si falla, mostrará un mensaje de error de texto:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Manual básico(oldtoolbag.com)</<title>　
</<head>
<body>
<audio controls>
　　<source src="/correr/html/horse.mp3" type="audio/mpeg">
　　<source src="/correr/html/horse.ogg" type="audio/ogg">
　　Su navegador no admite este formato de audio.
</audio>
</body>
</html>
Prueba y ve si ‹/›
Problema:

  • La etiqueta <audio> en HTML 4 Es inválido. Su página no puede pasar por HTML 4 Verificación.

  • Debe convertir el archivo de audio a un formato diferente.

  • El elemento <audio> no funciona en navegadores antiguos.

La mejor solución HTML

El siguiente ejemplo utiliza dos formatos de audio diferentes. HTML5 El elemento <audio> intentará reproducir el audio en formato mp3 o ogg para reproducir el audio. Si falla, el código intentará volver a intentarlo con el elemento <embed>.

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Manual básico(oldtoolbag.com)</<title>　
</<head>
<body>
<audio controls>
　　<source src="/correr/html/horse.mp3" type="audio/mpeg">
　　<source src="/correr/html/horse.ogg" type="audio/ogg">
　　<embed height="50" width="100" src="/correr/html/horse.mp3">
</audio>
</body>
</html>
Prueba y ve si ‹/›
Problema:

  • Debes convertir el audio a un formato diferente.

  • El elemento <embed> no puede desplegar mensajes de error.

Uso de enlaces

Si la página web contiene enlaces a archivos multimedia, la mayoría de los navegadores usarán una "aplicación auxiliar" para reproducir el archivo.

El siguiente fragmento de código muestra enlaces a archivos mp3 Enlace al archivo. Si el usuario hace clic en el enlace, el navegador iniciará una "aplicación auxiliar" para reproducir el archivo:

Ejemplo en línea

<a href="/correr/html/horse.mp3">Reproducir el sonido</a>
Prueba y ve si ‹/›

Descripción del sonido en línea

Cuando incluye sonido en una página web o como parte de la página, se llama sonido en línea.

Si planeas usar sonido en línea en aplicaciones web, debes saber que a mucha gente le molesta el sonido en línea. Además, ten en cuenta que el usuario puede haber desactivado la opción de sonido en línea en el navegador.

Nuestra mejor recomendación es incluirlos solo donde el usuario quiera escuchar sonido en línea. Un ejemplo positivo es cuando el usuario necesita escuchar una grabación y hacer clic en un enlace, se abre la página y se reproduce la grabación.

Etiquetas multimedia HTML

New: HTML5 Nueva etiqueta

EtiquetaDescripción
<embed>Definir objeto integrado. HTML4 No recomendado, HTML5 Permitido en
<object>Definir objeto integrado.
<param>Definir parámetros del objeto.
<audio>HTML5Definir contenido de sonido
<video>HTML5Definir un video o película
<source>HTML5Definición de recursos multimedia del elemento media (<video> y <audio>)
<track>HTML5Especifica el archivo de subtítulos del elemento media u otros archivos que contienen texto (video y audio)
Reproducción de videos HTML (Video)Plugins HTML