Áudio HTML5 - HTML5 audio

O áudio HTML5 é um assunto da especificação HTML5 , incorporando entrada, reprodução e síntese de áudio , bem como voz em texto , no navegador.

elemento <audio>

O elemento <audio> representa um som ou um fluxo de áudio. É comumente usado para reproduzir um único arquivo de áudio em uma página da web, mostrando um widget GUI com controles de reprodução / pausa / volume.

O elemento <audio> possui estes atributos:

  • atributos globais (accesskey; class; contenteditable; contextmenu; dir; draggable; dropzone; hidden; id; lang; verificação ortográfica; estilo; tabindex; título; traduzir)
  • autoplay = "autoplay" ou "" (string vazia) ou vazio
    Instrui o User-Agent a iniciar automaticamente a reprodução do stream de áudio assim que puder fazê-lo sem parar.
  • preload = "none" ou "metadata" ou "auto" ou "" (string vazia) ou vazio
    Representa uma dica para o Agente do Usuário sobre se o download otimista do próprio fluxo de áudio ou de seus metadados é considerado válido.
    • "none": indica ao User-Agent que não se espera que o usuário precise do stream de áudio ou que é desejável minimizar o tráfego desnecessário.
    • "metadados": indica ao Agente do Usuário que não se espera que o usuário precise do stream de áudio, mas que buscar seus metadados (duração e assim por diante) é desejável.
    • "auto": dicas para o agente do usuário que o download de todo o fluxo de áudio é considerado desejável de forma otimista.
  • controles = "controles" ou "" (string vazia) ou vazio
    Instrui o Agente do Usuário a expor uma interface do usuário para controlar a reprodução do fluxo de áudio.
  • loop = "loop" ou "" (string vazia) ou vazio
    Instrui o Agente do Usuário a retornar ao início do fluxo de áudio ao chegar ao final.
  • mediagroup = string
    Instrui o Agente do Usuário a vincular vários vídeos e / ou fluxos de áudio juntos.
  • muted = "mudo" ou "" (string vazia) ou vazio
    Representa o estado padrão do fluxo de áudio, substituindo potencialmente as preferências do usuário.
  • src = não vazio [URL] potencialmente rodeado por espaços
    O URL para o fluxo de áudio.

Exemplo:

<audio controls>
  <source src="https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type="audio/mp4" />
  <source src="https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" type="audio/ogg; codecs=vorbis" />
  <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

Navegadores de suporte

No PC:

Em dispositivos móveis:

Formatos de codificação de áudio suportados

A adoção do áudio HTML5, assim como do vídeo HTML5 , tornou-se polarizada entre os proponentes dos formatos livres e protegidos por patentes . Em 2007, a recomendação de usar Vorbis foi recolhido a partir da especificação do W3C juntamente com a de usar Ogg Theora , citando a falta de um formato aceito por todos os principais fabricantes de navegadores.

A Apple e Microsoft suportam a ISO / IEC - definido formatos AAC e os mais velhos MP3 . Mozilla e Opera suportam o formato Vorbis livre e aberto , livre de royalties em contêineres Ogg e WebM , e criticam a natureza sobrecarregada de patentes de MP3 e AAC, que são garantidos como “não livres”. Até agora, o Google oferece suporte para todos os formatos comuns.

A maioria dos arquivos AAC com comprimento finito são embalados em um contêiner MPEG-4 (.mp4, .m4a), que tem suporte nativo no Internet Explorer, Safari e Chrome, e também no sistema operacional Firefox e Opera. A maioria das transmissões ao vivo AAC com comprimento infinito é envolvida em um contêiner de Transmissão de Dados de Áudio (.aac, .adts), que é compatível com Chrome, Safari, Firefox e Edge.

Muitos navegadores também oferecem suporte a áudio PCM não compactado em um contêiner WAV E.

Em 2012, o formato Opus livre e aberto, livre de royalties , foi lançado e padronizado pela IETF . É compatível com Mozilla, Google, Opera e Edge.

Esta tabela documenta o suporte atual para formatos de codificação de áudio pelo <audio>elemento.

Formatos suportados por diferentes navegadores da web
Formato Recipiente Tipo MIME cromada Internet Explorer Borda Raposa de fogo Ópera Safári
PCM WAV audio / wav sim Não sim Sim, na v3.5 Sim, na v11.00 Sim, na v3.1
MP3 MP3 audio / mpeg sim Sim, no IE9 sim Sim, em v71 sim Sim, na v3.1
AAC MP4 audio / mp4 sim Sim, no IE9 sim Do SO sim sim
ADTS audio / aac
audio / aacp
sim Não sim Do sistema operacional na v45.0 sim sim
Vorbis Ogg audio / ogg Sim, na v9 Não Em v79
Em v17, com extensões de mídia da Web
Sim, na v3.5 Sim, na v10.50 Com componentes Xiph QuickTime ( macOS 10.11 e anterior)
WebM audio / webm sim Não Em v79
Em v17, com extensões de mídia da Web
Sim, na v4.0 Sim, na v10.60 Não
Opus Ogg audio / ogg Sim, na v25
(na v31 para Windows)
Não Em v79
Em v17, com extensões de mídia da Web
Sim, na v15.0 Sim, na v14 Não
WebM audio / webm sim Não Em v79
Em v17, com extensões de mídia da Web
Sim, na v28.0 sim Não
CAF audio / x-caf Não Não Não Não Não Sim, no Safari 11 e macOS High Sierra
FLAC FLAC audio / flac Sim, em v56 Não Sim, na v16 Sim, em v51 sim Sim, na v11
Ogg audio / ogg Sim, em v56 Não Em v79
Em v17, com extensões de mídia da Web
Sim, em v51 sim Não

API de áudio da Web e API de processamento de MediaStream

A especificação da API de áudio da web desenvolvida pelo W3C descreve uma API JavaScript de alto nível para processamento e sintetização de áudio em aplicativos da web. O paradigma principal é o de um gráfico de roteamento de áudio, onde vários objetos AudioNode são conectados para definir a renderização geral do áudio. O processamento real ocorrerá principalmente na implementação subjacente (normalmente código Assembly / C / C ++ otimizado), mas o processamento direto de JavaScript e a síntese também são suportados.

O navegador Firefox da Mozilla implementa uma extensão de API de dados de áudio semelhante desde a versão 4, implementada em 2010 e lançada em 2011, mas a Mozilla avisa que é fora do padrão e obsoleto, e recomenda a API de áudio da Web em seu lugar. Algumas bibliotecas de processamento e síntese de áudio JavaScript, como Audiolet , oferecem suporte a ambas as APIs.

O W3C Audio Working Group também está considerando a especificação da API MediaStream Processing desenvolvida pela Mozilla . Além de mixagem e processamento de áudio, ele cobre streaming de mídia mais geral, incluindo sincronização com elementos HTML, captura de fluxos de áudio e vídeo e roteamento ponto a ponto de tais fluxos de mídia.

Navegadores de suporte

No PC:

Em dispositivos móveis:

  • Google Chrome para Android 28 (ativado por padrão desde 29)
  • Safari 6 (tem restrições de uso (sem som, a menos que o usuário seja chamado))
  • Firefox 23 (ativado por padrão desde 25)
  • Tizen

API Web Speech

A API Web Speech tem como objetivo fornecer um método de entrada alternativo para aplicativos da web (sem o uso de teclado). Com essa API, os desenvolvedores podem dar aos aplicativos da web a capacidade de transcrever voz em texto, a partir do microfone do computador. O áudio gravado é enviado aos servidores de fala para transcrição, após o que o texto é digitado para o usuário. A própria API é agnóstica quanto à implementação de reconhecimento de voz subjacente e pode oferecer suporte a reconhecedores tanto baseados em servidor quanto integrados. O grupo HTML Speech Incubator propôs a implementação da tecnologia de áudio-fala em navegadores na forma de APIs de plataforma cruzada uniformes. A API contém:

  • API Speech Input
  • API Text to Speech

O Google integrou esse recurso ao Google Chrome em março de 2011. Permitindo que seus usuários pesquisassem na web com sua voz com códigos como:

<script type="application/javascript">
    function startSearch(event) {
        event.target.form.submit();
    }
</script>
<form action="http://www.google.com/search">
  <input type="search" name="q" speech required onspeechchange="startSearch">
</form>

Navegadores de suporte

  • Safari 6.1 e superior [PARCIAL: apenas síntese de voz; sem reconhecimento]
  • Google Chrome 25 e superior
  • Firefox Desktop 44.0 e superior (Linux e Mac) / 45.0 e superior (Windows) [PARCIAL: apenas síntese de voz; nenhum reconhecimento; atualmente requer que a opção "media.webspeech.recognition.enable" about: config seja alterada manualmente para "true"]

Veja também

Notas

Referências

Links externos