Latest web development tutorials

áudio HTML (Audio)

Som em HTML pode jogar de diferentes maneiras.


Problemas e soluções

Reproduzir áudio em HTML não é fácil!

Você precisa de um monte de dicas familiares para garantir que seus arquivos de áudio em todos os navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera), e todo o hardware (PC, Mac, iPad, iPhone) podem ser reproduzidos.

Neste capítulo, W3CSchool você resumir os problemas e soluções.


O uso de plug-in

Plug-in é uma extensão do navegador padrão possui um pequeno programa de computador.

Plug-ins podem usar <object> tag ou tag <embed> adicionado à página.

Esses rótulos definir o recurso (tipicamente recursos não-HTML) recipiente, dependendo do tipo, eles serão exibidos pelo navegador que também é exibido pelos plug-ins externos.


Usando o elemento <embed>

<Embed> tag define um teor de recipiente externo (não HTML). (Esta é uma tag HTML5 em HTML4 é ilegal, mas todos os navegadores são válidos).

O fragmento de código a seguir pode exibir um arquivo MP3 embutido em uma página web:

Exemplos

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

tente »

problema:

  • <Embed> tag no HTML 4 é inválido. A página não pode ser verificada por meio de HTML 4.
  • Diferentes navegadores suportam diferentes formatos de áudio para.
  • Se seu navegador não suporta o formato de arquivo, sem plug-ins, então você não pode reproduzir o áudio.
  • Se o computador do usuário não é plug-in instalado, você não pode reproduzir o áudio.
  • Se o arquivo é convertido para outros formatos, ainda não pode jogar em todos os navegadores.

Use elemento <object>

<Tag Object> tag também pode ser definido fora do recipiente de conteúdo (não HTML).

O fragmento de código a seguir pode exibir um arquivo MP3 embutido em uma página web:

Exemplos

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

tente »

problema:

  • Diferentes navegadores suportam diferentes formatos de áudio para.
  • Se seu navegador não suporta o formato de arquivo, sem plug-ins, então você não pode reproduzir o áudio.
  • Se o computador do usuário não é plug-in instalado, você não pode reproduzir o áudio.
  • Se o arquivo é convertido para outros formatos, ainda não pode jogar em todos os navegadores.

Use HTML5 <audio> elemento

HTML5 <audio> elemento é um elemento HTML5 em HTML 4 é ilegal, mas em todos os navegadores são válidos.

O <audio> elemento funciona em todos os navegadores modernos.

Abaixo, vamos usar a tag <audio> para descrever os arquivos MP3 (Internet Explorer, Chrome e Safari é eficaz), também acrescentou uma tipos de arquivos OGG (Firefox e Opera eficaz). Se ele falhar, ele exibe um erro texto:

Exemplos

<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>

tente »

problema:

  • tag <audio> no HTML 4 é inválido. Sua página não pode ser verificada por meio de HTML 4.
  • Você tem que converter arquivos de áudio para diferentes formatos.
  • <Audio> elemento não funciona em navegadores mais antigos.

Melhor Solução de HTML

O exemplo a seguir usa dois formatos de áudio diferentes. HTML5 <audio> elemento tenta jogar ogg para mp3 ou áudio. Se isso falhar, o código tentará reverter elemento <embed>.

Exemplos

<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>

tente »

problema:

  • Você deve ser convertido para um formato de áudio diferente.
  • <Embed> elemento não pode ser revertida para exibir uma mensagem de erro.

Yahoo Media Player - uma maneira simples de adicionar áudio em seu site

Jogador usando o Yahoo é gratuito. Para usá-lo, você precisa colocar este JavaScript na parte inferior da página:

Yahoo leitor pode reproduzir MP3 e outros formatos. Você só precisa adicionar uma linha de código para sua página ou blog, você pode facilmente fazer a sua página HTML em uma lista de reprodução profissional:

Exemplos

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

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

tente »

Se você quiser usá-lo, você precisa colocar este JavaScript na parte inferior da página:

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

Em seguida, basta colocar um link para seus arquivos MP3 em HTML, JavaScript cria automaticamente o botão de reprodução para cada canção:

<a href="song1.mp3"> Reproduzir música 1 </a>
<a href="song2.wav"> jogar Song 2 </a>
...
...

Yahoo Media Player para os usuários é um botão de reprodução pequena, em vez de o jogador completo. No entanto, quando você clica neste botão, irá aparecer um jogador completo.

Por favor note que este jogador está sempre ancorada na parte inferior da moldura da janela. Basta clicar nele, você pode deslizar para fora.


usando hiperlinks

Se a página contém um link apontando para arquivos de mídia, a maioria dos navegadores irá usar "aplicação auxiliar" para reproduzir o arquivo.

O fragmento de código a seguir mostra links para arquivos de mp3. Se o usuário clica no link, o navegador irá lançar o "aplicativo auxiliar" para reproduzir o arquivo:

Exemplos

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

tente »


Descrição linha de som

Quando você incluir som em uma página web, ou como parte de uma página web, ele é chamado de som embutido.

Se você pretende usar em linha sons em suas aplicações web, você precisa perceber que muitas pessoas acham linha som irritante. Observe também que os usuários podem ter fechado a sua opção de navegador embutido som.

Nosso melhor conselho é somente quando o usuário quer ouvir lugares em linha de som contê-los. Um exemplo positivo é que, quando o usuário precisa ouvir a gravação e clicar em um link irá abrir a página e reproduzir a gravação.


tag HTML multimédia

Novo: HTML5 novo rótulo

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