Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.

View in EnglishAlways switch to English

API Web Áudio

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨abril de 2021⁩.

* Some parts of this feature may have varying levels of support.

A API de áudio da Web fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panorâmica) e muito mais.

Conceitos e uso de áudio da Web

A API de áudio da Web envolve a manipulação de operações de áudio dentro de umcontexto de áudio e foi projetada para permitir oroteamento modular. As operações básicas de áudio são realizadas comnós de áudio, que são vinculados para formar umgráfico de roteamento de áudio. Várias fontes — com diferentes tipos de layout de canal — são suportadas mesmo dentro de um único contexto. Este design modular oferece flexibilidade para criar funções de áudio complexas com efeitos dinâmicos.

Os nós de áudio são ligados em cadeias e teias simples por suas entradas e saídas. Eles geralmente começam com uma ou mais fontes. As fontes fornecem matrizes de intensidades sonoras (amostras) em fatias de tempo muito pequenas, geralmente dezenas de milhares delas por segundo. Estes podem ser calculados matematicamente (comoOscillatorNode), ou podem ser gravações de arquivos de som/vídeo (comoAudioBufferSourceNode eMediaElementAudioSourceNode) e fluxos de áudio (MediaStreamAudioSourceNode). Na verdade, os arquivos de som são apenas gravações das próprias intensidades sonoras, que vêm de microfones ou instrumentos elétricos e são misturadas em uma única e complicada onda.

As saídas desses nós podem ser vinculadas às entradas de outros, que misturam ou modificam esses fluxos de amostras de som em diferentes fluxos. Uma modificação comum é multiplicar as amostras por um valor para torná-las mais altas ou mais baixas (como é o caso deGainNode). Uma vez que o som tenha sido suficientemente processado para o efeito pretendido, ele pode ser vinculado à entrada de um destino (BaseAudioContext.destination), que envia o som para os alto-falantes ou fones de ouvido. Esta última conexão só é necessária se o usuário tiver que ouvir o áudio.

Um fluxo de trabalho simples e típico para áudio da web seria algo assim:

Criar contexto de áudio
Dentro do contexto, crie fontes — como<áudio>, oscilador, fluxo
Crie nós de efeitos, como reverb, filtro biquad, panner, compressor
Escolha o destino final do áudio, por exemplo, os alto-falantes do sistema
Conecte as fontes aos efeitos e os efeitos ao destino.

Um diagrama de caixa simples com uma caixa externa denominada Contexto de áudio e três caixas internas denominadas Fontes, Efeitos e Destino. As três caixas internas têm setas entre elas apontando da esquerda para a direita, indicando o fluxo de informações de áudio.

O tempo é controlado com alta precisão e baixa latência, permitindo que os desenvolvedores escrevam código que responda com precisão a eventos e seja capaz de direcionar amostras específicas, mesmo em uma alta taxa de amostragem. Assim, aplicações como baterias eletrônicas e sequenciadores estão bem ao alcance.

A API de áudio da Web também nos permite controlar como o áudio éespacializado. Utilizando um sistema baseado em ummodelo de ouvinte-fonte, permite o controle domodelo panorâmico e trata daatenuação induzida por distância induzida por uma fonte em movimento (ou ouvinte em movimento).

você pode ler sobre a teoria da API de áudio da Web com muito mais detalhes em nosso artigoConceitos básicos por trás da API de áudio da Web .

Público-alvo da API de áudio da Web

A API de áudio da Web pode parecer intimidante para aqueles que não estão familiarizados com termos de áudio ou música e, como incorpora uma grande quantidade de funcionalidades, pode ser difícil começar se você for um desenvolvedor.

Ele pode ser usado para incorporar áudio em seu site ou aplicativo,fornecendo uma atmosfera como futurelibrary.no oufeedback auditivo em formulários. No entanto, também pode ser usado para criar instrumentos interativosavançados. Com isso em mente, é adequado tanto para desenvolvedores quanto para músicos.

Temos umtutorial introdutório simples para aqueles que estão familiarizados com programação, mas precisam de uma boa introdução a alguns dos termos e estrutura da API.

Há também um artigoConceitos básicos por trás da API de áudio da Web, para ajudá-lo a entender como o áudio digital funciona, especificamente no domínio da API. Isso também inclui uma boa introdução a alguns dos conceitos sobre os quais a API é construída.

Aprender a codificar é como jogar cartas - você aprende as regras, depois joga, depois volta e aprende as regras novamente, depois joga novamente. Portanto, se parte da teoria não se encaixar bem após o primeiro tutorial e artigo, há umtutorial avançado que estende o primeiro para ajudá-lo a praticar o que você aprendeu e aplicar algumas técnicas mais avançadas para construir um sequenciador de passos.

Também temos outros tutoriais e material de referência abrangente disponível que abrange todos os recursos da API. Veja a barra lateral nesta página para saber mais.

Se você está mais familiarizado com o lado musical das coisas, está familiarizado com os conceitos de teoria musical, quer começar a construir instrumentos, então você pode ir em frente e começar a construir coisas com o tutorial avançado e outros como um guia (o tutorial linkado acima cobre agendando notas, criando osciladores e envelopes sob medida, bem como um LFO entre outras coisas.)

Se você não estiver familiarizado com o básico de programação, você pode querer consultar alguns tutoriais JavaScript para iniciantes e depois voltar aqui - veja nossomódulo de aprendizado JavaScript para iniciantes para um ótimo lugar para começar.

Interfaces da API de áudio da Web

A API de áudio da Web tem várias interfaces e eventos associados, que dividimos em nove categorias de funcionalidade.

Definição geral do gráfico de áudio

Contêineres e definições gerais que moldam gráficos de áudio no uso da API de áudio da Web.

AudioContext: A interfaceAudioContext representa um gráfico de processamento de áudio construído a partir de módulos de áudio ligados entre si, cada um representado por umAudioNode. Um contexto de áudio controla a criação dos nós que ele contém e a execução do processamento ou decodificação de áudio. Você precisa criar umAudioContext antes de fazer qualquer outra coisa, pois tudo acontece dentro de um contexto.
AudioNode: A interfaceAudioNode representa um módulo de processamento de áudio como umafonte de áudio (por exemplo, um elemento HTML<audio> ou<video>),audio destino,módulo de processamento intermediário (por exemplo, um filtro comoBiquadFilterNode oucontrole de volume comoGainNode).
AudioParam: A interfaceAudioParam representa um parâmetro relacionado ao áudio, como um de umAudioNode. Ele pode ser definido para um valor específico ou uma alteração no valor e pode ser programado para ocorrer em um horário específico e seguindo um padrão específico.
AudioParamMap: Fornece uma interface tipo mapa para um grupo de interfacesAudioParam, o que significa que fornece os métodosforEach(),get(),has(),keys () evalues(), bem como uma propriedadesize.
BaseAudioContext: A interfaceBaseAudioContext atua como uma definição básica para gráficos de processamento de áudio online e offline, conforme representado porAudioContext eOfflineAudioContext respectivamente . Você não usariaBaseAudioContext diretamente — você usaria seus recursos por meio de uma dessas duas interfaces herdadas.
O eventoended: O eventoended é acionado quando a reprodução é interrompida porque o fim da mídia foi atingido.

Definindo fontes de áudio

Interfaces que definem fontes de áudio para uso na API de áudio da Web.

AudioScheduledSourceNode: OAudioScheduledSourceNode é uma interface pai para vários tipos de interfaces de nó de fonte de áudio. É umAudioNode.
OscillatorNode: A interfaceOscillatorNode representa uma forma de onda periódica, como uma onda senoidal ou triangular. É um módulo de processamento de áudioAudioNode que faz com que uma determinadafrequência de onda seja criada.
AudioBuffer: A interfaceAudioBuffer representa um pequeno recurso de áudio que reside na memória, criado a partir de um arquivo de áudio usando o métodoBaseAudioContext.decodeAudioData ou criado com dados brutos usandoBaseAudioContext.createBuffer. Uma vez decodificado neste formato, o áudio pode ser colocado em umAudioBufferSourceNode.
AudioBufferSourceNode: A interfaceAudioBufferSourceNode representa uma fonte de áudio que consiste em dados de áudio na memória, armazenados em umAudioBuffer. É umAudioNode que atua como uma fonte de áudio.
MediaElementAudioSourceNode: A interfaceMediaElementAudioSourceNode representa uma fonte de áudio que consiste em um elemento HTML<audio> ou<video>. É umAudioNode que atua como uma fonte de áudio.
MediaStreamAudioSourceNode: A interfaceMediaStreamAudioSourceNode representa uma fonte de áudio que consiste em umMediaStream (como uma webcam, microfone ou um fluxo sendo enviado de um computador remoto). Se várias faixas de áudio estiverem presentes no fluxo, a faixa cujoid vem primeiro lexicograficamente (em ordem alfabética) é usada. É umAudioNode que atua como uma fonte de áudio.
MediaStreamTrackAudioSourceNode: Um aceno de cabeça e do tipoMediaStreamTrackAudioSourceNode representa uma fonte de áudio cujos dados vêm de umMediaStreamTrack. Ao criar o nó usando o métodocreateMediaStreamTrackSource() para criar o nó, você especifica qual faixa usar. Isso fornece mais controle do queMediaStreamAudioSourceNode.

Definindo filtros de efeitos de áudio

Interfaces para definir os efeitos que você deseja aplicar às suas fontes de áudio.

BiquadFilterNode: A interfaceBiquadFilterNode representa um filtro simples de baixa ordem. É umAudioNode que pode representar diferentes tipos de filtros, dispositivos de controle de tom ou equalizadores gráficos. UmBiquadFilterNode sempre tem exatamente uma entrada e uma saída.
ConvolverNode: A interfaceConvolverNode é umAudioNode que executa uma Convolução Linear em um determinadoAudioBuffer e é frequentemente usado para obter um reverb efeito.
DelayNode: A interfaceDelayNode representa umalinha de atraso; um módulo de processamento de áudioAudioNode que causa um atraso entre a chegada de um dado de entrada e sua propagação para a saída.
DynamicsCompressorNode: A interfaceDynamicsCompressorNode fornece um efeito de compressão, que reduz o volume das partes mais altas do sinal para ajudar a evitar cortes e distorções que podem ocorrer quando vários sons são reproduzidos e multiplexados ao mesmo tempo.
GainNode: A interfaceGainNode representa uma mudança no volume. É um módulo de processamento de áudioAudioNode que faz com que um determinadogain seja aplicado aos dados de entrada antes de sua propagação para a saída.
WaveShaperNode: A interfaceWaveShaperNode representa um distorção não linear. É umAudioNode que usa uma curva para aplicar uma distorção de forma de onda ao sinal. Além dos efeitos de distorção óbvios, é frequentemente usado para adicionar uma sensação de calor ao sinal.
PeriodicWave: Descreve uma forma de onda periódica que pode ser usada para moldar a saída de umOscillatorNode.
IIRFilterNode: Implementa um filtro geral deresposta ao impulso infinito (IIR); este tipo de filtro pode ser usado para implementar dispositivos de controle de tom e equalizadores gráficos também.

Definindo destinos de áudio

Assim que você terminar de processar seu áudio, essas interfaces definem onde ele deve ser emitido.

AudioDestinationNode: A interfaceAudioDestinationNode representa o destino final de uma fonte de áudio em um determinado contexto — geralmente os alto-falantes do seu dispositivo.
MediaStreamAudioDestinationNode: A interfaceMediaStreamAudioDestinationNode representa um destino de áudio que consiste em umWebRTC MediaStream com um únicoAudioMediaStreamTrack, que pode ser usado de maneira semelhante a umMediaStream obtido degetUserMedia(). É umAudioNode que atua como destino de áudio.

Análise e visualização de dados

Se você deseja extrair tempo, frequência e outros dados do seu áudio, oAnalyserNode é o que você precisa.

AnalyserNode: A interfaceAnalyserNode representa um nó capaz de fornecer informações de análise de frequência e domínio de tempo em tempo real, para fins de análise e visualização de dados.

Dividindo e mesclando canais de áudio

Para dividir e mesclar canais de áudio, você usará essas interfaces.

ChannelSplitterNode: A interfaceChannelSplitterNode separa os diferentes canais de uma fonte de áudio em um conjunto de saídasmono.
ChannelMergerNode: A interfaceChannelMergerNode reúne diferentes entradas mono em uma única saída. Cada entrada será usada para preencher um canal da saída.

Espacialização de áudio

Essas interfaces permitem adicionar efeitos panorâmicos de espacialização de áudio às suas fontes de áudio.

AudioListener: A interfaceAudioListener representa a posição e orientação da única pessoa que está ouvindo a cena de áudio usada na espacialização de áudio.
PannerNode: A interfacePannerNode representa a posição e o comportamento de um sinal de fonte de áudio no espaço 3D, permitindo criar efeitos de panorâmica complexos.
StereoPannerNode: A interfaceStereoPannerNode representa um simples nó panorâmico estéreo que pode ser usado para deslocar um fluxo de áudio para a esquerda ou para a direita.

Processamento de áudio em JavaScript

Usando worklets de áudio, você pode definir nós de áudio personalizados escritos em JavaScript ouWebAssembly. Worklets de áudio implementam a interfaceWorklet, uma versão leve da interfaceWorker.

AudioWorklet: A interfaceAudioWorklet está disponível através do objetoAudioContext do objetoaudioWorklet e permite adicionar módulos ao worklet de áudio a ser executado fora do thread principal.
AudioWorkletNode: A interfaceAudioWorkletNode representa umAudioNode que está embutido em um gráfico de áudio e pode passar mensagens para oAudioWorkletProcessor correspondente.
AudioWorkletProcessor: A interfaceAudioWorkletProcessor representa o código de processamento de áudio executado em umAudioWorkletGlobalScope que gera, processa ou analisa o áudio diretamente e pode passar mensagens para oAudioWorkletNode correspondente.
AudioWorkletGlobalScope: A interfaceAudioWorkletGlobalScope é um objeto derivado deWorkletGlobalScope que representa um contexto de trabalho no qual um script de processamento de áudio é executado; ele foi projetado para permitir a geração, processamento e análise de dados de áudio diretamente usando JavaScript em um encadeamento de worklet em vez de no encadeamento principal.

Obsoleto: nós do processador de script

Antes da definição dos worklets de áudio, a API de áudio da Web usava oScriptProcessorNode para processamento de áudio baseado em JavaScript. Como o código é executado no thread principal, eles têm um desempenho ruim. OScriptProcessorNode é mantido por motivos históricos, mas está marcado como obsoleto.

ScriptProcessorNodeDeprecated: A interfaceScriptProcessorNode permite a geração, processamento ou análise de áudio usando JavaScript. É um módulo de processamento de áudio AudioNode que está vinculado a dois buffers, um contendo a entrada atual e outro contendo a saída. Um evento, implementando a interfaceAudioProcessingEvent, é enviado ao objeto toda vez que o buffer de entrada contém novos dados, e o manipulador de eventos termina quando preenche o buffer de saída com dados.
audioprocess (evento)Deprecated: O eventoaudioprocess é acionado quando um buffer de entrada de uma API de áudio da Web ScriptProcessorNode está pronto para ser processado.
AudioProcessingEventDeprecated: OAudioProcessingEvent representa eventos que ocorrem quando um buffer de entrada ScriptProcessorNode está pronto para ser processado.

Processamento de áudio off-line/de fundo

É possível processar/renderizar um gráfico de áudio muito rapidamente em segundo plano — renderizando-o para umAudioBuffer em vez de para os alto-falantes do dispositivo — com o seguinte.

OfflineAudioContext: A interfaceOfflineAudioContext é uma interfaceAudioContext que representa um gráfico de processamento de áudio construído a partir deAudioNodes vinculados. Em contraste com umAudioContext padrão, umOfflineAudioContext realmente não renderiza o áudio, mas o gera,tão rápido quanto possível, em um buffer.
complete (evento): O eventocomplete é acionado quando a renderização de umOfflineAudioContext é encerrada.
OfflineAudioCompletionEvent: OOfflineAudioCompletionEvent representa eventos que ocorrem quando o processamento de umOfflineAudioContext é encerrado. O eventocomplete usa essa interface.

Guias e tutoriais

Tutorial e exemplo: Teclado de Sintetizador Simples: Este artigo apresenta o código e uma demonstração funcional de um teclado que você pode tocar usando seu mouse. O teclado lhe permite alternar entre formas de onda padrões e customizadas. Esse exemplo utiliza das seguintes interfaces de Web API:AudioContext,OscillatorNode,PeriodicWave, eGainNode.

Exemplos

Você pode encontrar vários exemplos em nossorepositório webaudio-example no GitHub.

Especificações

Specification
Web Audio API # AudioContext

Tones: uma biblioteca simples para tocar tons/notas específicos usando a API de áudio da Web.
Tone.js: um framework para criar música interativa no navegador.
howler.js: uma biblioteca de áudio JS que tem como padrãoWeb Audio API e retorna paraHTML Audio, além de fornecer outros recursos úteis.
Mooog: encadeamento de AudioNodes no estilo jQuery, envios/retornos no estilo do mixer e muito mais.
XSound: Biblioteca Web Audio API para Sintetizador, Efeitos, Visualização, Gravação, etc.
OpenLang: aplicativo da Web do laboratório de linguagem de vídeo HTML usando a API de áudio da Web para gravar e combinar vídeo e áudio de diferentes fontes em um único arquivo (fonte no GitHub)
Pts.js: Simplifica a visualização de áudio na web (guide)

Tópicos relacionados

Help improve MDN

Learn how to contribute

This page was last modified on⁨27 de abr. de 2025⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換