Latest web development tutorials

HTML de audio (Audio)

El sonido en HTML puede jugar de diferentes maneras.


Problemas y soluciones

Reproduce audio en formato HTML no es fácil!

Se necesita una gran cantidad de consejos familiares para asegurarse de que los archivos de audio en todos los navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera), y todo el hardware (PC, Mac, iPad, iPhone) se pueden reproducir.

En este capítulo, W3CSchool se resumen los problemas y soluciones.


El uso de plug-in

Navegador plug-in es una extensión del navegador estándar cuenta con un pequeño programa informático.

Plug-ins pueden utilizar la etiqueta <object> o <embed> añadido a la página.

Estas etiquetas definen el recurso (típicamente recursos no HTML) contenedor, dependiendo del tipo, que sean exhibidas por el navegador que también está representada por los plug-ins externos.


Usando el elemento <embed>

<Insertar> define un contenido contenedor externo (no HTML). (Este es un etiquetas HTML5 en HTML 4 es ilegal, pero todos los navegadores son válidos).

El siguiente fragmento de código puede mostrar un archivo MP3 incrustado en una página web:

Ejemplos

<embed height="50" width="100" src="horse.mp3">

Trate »

problema:

  • <Insertar> en HTML 4 no es válido. Página no puede ser verificada por HTML 4.
  • Los distintos navegadores soportan diferentes formatos de audio para.
  • Si su navegador no soporta el formato de archivo, sin plug-ins, entonces usted no puede reproducir el audio.
  • Si el equipo del usuario no es plug-in instalado, no se puede reproducir el audio.
  • Si el archivo se convierte a otros formatos, todavía no puede jugar en todos los navegadores.

Uso elemento <object>

<Etiqueta Object> etiqueta también se puede definir exterior del contenedor de contenido (no HTML).

El siguiente fragmento de código puede mostrar un archivo MP3 incrustado en una página web:

Ejemplos

<object height="50" width="100" data="horse.mp3"></object>

Trate »

problema:

  • Los distintos navegadores soportan diferentes formatos de audio para.
  • Si su navegador no soporta el formato de archivo, sin plug-ins, entonces usted no puede reproducir el audio.
  • Si el equipo del usuario no es plug-in instalado, no se puede reproducir el audio.
  • Si el archivo se convierte a otros formatos, todavía no puede jugar en todos los navegadores.

Utilice HTML5 elemento <audio>

HTML5 <audio> elemento es un elemento HTML5 en HTML 4 es ilegal, pero en todos los navegadores son válidos.

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

A continuación vamos a utilizar la etiqueta <audio> para describir los archivos MP3 (Internet Explorer, Chrome y Safari es eficaz), tambien tiene añadido un tipo de archivos OGG (Firefox y Opera efectiva). Si falla, se muestra un error texto:

Ejemplos

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>

Trate »

problema:

  • etiqueta <audio> en HTML 4 no es válido. Su página no puede ser verificada por HTML 4.
  • Usted tiene que convertir archivos de audio a diferentes formatos.
  • elemento <audio> no funciona en los navegadores antiguos.

Mejor Solución de HTML

El siguiente ejemplo utiliza dos formatos de audio diferentes. HTML5 elemento <audio> intenta reproducir OGG a MP3 o de audio. Si esto falla, el código intentará deshacer <embed> elemento.

Ejemplos

<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>

Trate »

problema:

  • Debe ser convertido a un formato de audio diferente.
  • <Insertar> elemento puede no ser revertido para mostrar un mensaje de error.

Yahoo Media Player - una forma sencilla de añadir audio en su sitio

Player a través de Yahoo es libre. Para utilizarlo, es necesario poner este JavaScript en la parte inferior de la página:

Yahoo reproductor puede reproducir MP3 y otros formatos. Sólo tiene que añadir una línea de código a su página o blog, usted puede hacer fácilmente su página HTML en una lista de reproducción profesional:

Ejemplos

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

Trate »

Si desea utilizarlo, es necesario poner este JavaScript en la parte inferior de la página:

<script src="http://mediaplayer.yahoo.com/latest"></script>

Después, simplemente poner un enlace a los archivos MP3 en formato HTML, JavaScript crea automáticamente el botón de reproducción para cada canción:

<a href="song1.mp3"> canción del juego 1 </a>
<a href="song2.wav"> canción del juego 2 </a>
...
...

Yahoo reproductor multimedia para sus usuarios es un pequeño botón de reproducción en lugar del jugador. Sin embargo, cuando se hace clic en este botón se abrirá un jugador completo.

Tenga en cuenta que este jugador siempre está acoplado en la parte inferior del marco de la ventana. Basta con hacer clic en él, se puede deslizar hacia fuera.


El uso de hipervínculos

Si la página contiene un hipervínculo que apunta a archivos multimedia, la mayoría de los exploradores usan "aplicación de ayuda" para reproducir el archivo.

El fragmento de código siguiente muestra los enlaces a los archivos mp3. Si el usuario hace clic en el enlace, el navegador se lanzará "aplicación de ayuda" para reproducir el archivo:

Ejemplos

<a href="horse.mp3">Play the sound</a>

Trate »


Descripción línea de sonido

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

Si va a utilizar en línea suena en sus aplicaciones web, es necesario darse cuenta de que muchas personas se encuentran en línea sonido molesto. También tenga en cuenta que los usuarios deben de haber cerrado la opción de sonido en línea navegador.

Nuestro mejor consejo es que sólo cuando el usuario quiere escuchar lugares en línea de sonido ellas contienen. Un ejemplo positivo es que cuando el usuario necesita para escuchar la grabación y haga clic en un enlace, se abrirá la página y reproducir la grabación.


etiqueta HTML multimedia

Nuevo: HTML5 nueva etiqueta

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)