mozilla

Revision 655991 of API Web Áudio

  • Revision slug: Web/API/API_Web_Audio
  • Revision title: API Web Áudio
  • Revision id: 655991
  • Created:
  • Creator: DavidWalsh
  • Is current revision? No
  • Comment

Revision Content

A API de Web Audio disponibiliza um poderoso e versátil sistema de controle de áudio para a Web, permitindo aos desenvolvedores escolher arquivos de áudio, adicionar efeitos a estes arquivos, criar reprodutores de áudio, aplicar spatial effects (como panning) e muito mais.

Web audio: conceitos e uso

A API de Web audio envolve manipulação de operações com áudio dentro de um contexto de áudio, e foi desenvolvida para permitir o roteamento modular. Operações básicas de áudio são feitas com audio nodes (nós de áudio), que são ligados para formar gráficos de roteamento de áudio. Várias fontes - com diferentes tipos de layout de canal - são suportados mesmo em um único contexto. Este design modular permite flexibilidade para criar funções de áudio complexas com efeitos dinâmicos.

Audio nodes são ligados pelas suas entradas e saídas, formando uma cadeia que começa com uma ou mais fontes, passa por um ou mais nodes e então acaba em um destino (embora você não tenha que fornecer um destino, por exemplo, se você quiser apenas visualizar alguns dados de áudio). Um fluxo de trabalho simples, com Web áudio, seria algo parecido com isso:

  1. Crie um contexto de áudio
  2. Dentro do contexto, crie fontes de áudio — como <audio>, oscilador, stream
  3. Crie efeitos de áudio, como reverb, biquad filter, panner, compressor
  4. Escolha o destino final de áudio, por exemplo os auto-falantes de seu sistema
  5. Conecte as fontes de áudio com os efeitos, e os efeitos com o destino.

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.

O sincronismo é controlado com alta precisão e baixa latência, permitindo aos desenvolvedores escrever códigos que respondam com precisão a eventos e capazes de gerar exemplos específicos, mesmo com uma alta taxa de amostragem. Dessa forma, aplicações como baterias eletrônicas e seqüenciadores estarão facilmente ao alcance dos desenvolvedores.

A API de Web Audio também permite o controle de como o áudio será ordenado. Usando um sistema baseado em um modelo de source-listener, a API permite controlar os painéis de modelo para serem usados e tratados com atenuação de distância induzida ou doppler shift induzido por uma fonte em movimento (ou um ouvinte em movimento).

Nota: Você pode ver mais detalhes sobre a teoria da API de Web Audio em nosso artigo Basic concepts behind Web Audio API.

Web Audio: Interfaces da API

A API de Web Audio possui um total de 28 interfaces e eventos associados, que nós dividimos e categorizamos em 9 funcionalidades.

Definições gerais de gráficos de áudio (audio graph)

Definições gerais que moldam os gráficos de áudio no uso da API de Web Audio.

{{domxref("AudioContext")}}
A interface AudioContext representa um gráfico de processamento de áudio construído a partir de módulos de áudio ligados entre si, cada um representado por um {{domxref("AudioNode")}}. Um contexto de áudio (audio context) controla a criação dos nodes que ele contém e a execução do processamento de áudio, ou a decodificação. Como tudo acontece dentro de um contexto, você deve criar um AudioContext antes de fazer qualquer outra coisa.
{{domxref("AudioNode")}}
A interface AudioNode representa um módulo de processamento de áudio como uma fonte de áudio (por exemplo, um HTML {{HTMLElement("áudio")}} ou um elemento {{HTMLElement("vídeo")}}), destino de áudio, módulo de processamento intermediário (por exemplo, um filtro como {{domxref("BiquadFilterNode")}}, ou controle de volume, como {{domxref("GainNode")}}).
{{domxref("AudioParam")}}
A interface AudioParam representa um parâmetro relacionado ao áudio, como um parâmetro de um {{domxref("AudioNode")}}. Ele pode ser configurado com um valor específico ou uma mudança de valor, e pode ser programado para "acontecer" em um momento específico e seguindo um padrão específico.
{{event("ended_(Web_Audio)", "ended")}} (event)
O evento ended é disparado quando a reprodução parou porque o fim da mídia foi atingido.

Definindo fontes de áudio

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

{{domxref("OscillatorNode")}}
The OscillatorNode interface represents a sine wave. It is an {{domxref("AudioNode")}} audio-processing module that causes a given frequency of sine wave to be created.
{{domxref("AudioBuffer")}}
The AudioBuffer interface represents a short audio asset residing in memory, created from an audio file using the {{ domxref("AudioContext.createBuffer") }} method. Once decoded into this form, the audio can then be put into an {{ domxref("AudioBufferSourceNode") }}.
{{domxref("AudioBufferSourceNode")}}
The AudioBufferSourceNode interface represents an audio source consisting of in-memory audio data, stored in an {{domxref("AudioBuffer")}}. It is an {{domxref("AudioNode")}} that acts as an audio source.
{{domxref("MediaElementAudioSourceNode")}}
The MediaElementAudioSourceNode interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.
{{domxref("MediaStreamAudioSourceNode")}}
The MediaStreamAudioSourceNode interface represents an audio source consisting of a WebRTC {{domxref("MediaStream")}} (such as a webcam or microphone.) It is an {{domxref("AudioNode")}} that acts as an audio source.

Definindo filtros de efeitos de áudio

Interfaces para definição de efeitos que você deseja aplicar em suas fontes de áudio.

{{domxref("BiquadFilterNode")}}
The BiquadFilterNode interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices or graphic equalizers. A BiquadFilterNode always has exactly one input and one output.
{{domxref("ConvolverNode")}}
The ConvolverNode interface is an {{domxref("AudioNode")}} that performs a Linear Convolution on a given AudioBuffer, often used to achieve a reverb effect.
{{domxref("DelayNode")}}
The DelayNode interface represents a delay-line; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.
{{domxref("DynamicsCompressorNode")}}
The DynamicsCompressorNode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
{{domxref("GainNode")}}
The GainNode interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.
{{domxref("WaveShaperNode")}}
The WaveShaperNode interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.
{{domxref("PeriodicWave")}}
Used to define a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.

Definindo destinos de áudio

Uma vez que você tenha feito o processamento do seu áudio, estas interfaces definirão aonde será a saída do áudio.

{{domxref("AudioDestinationNode")}}
The AudioDestinationNode interface represents the end destination of an audio source in a given context — usually the speakers of your device.
{{domxref("MediaStreamAudioDestinationNode")}}
The MediaElementAudioSourceNode interface represents an audio destination consisting of a WebRTC {{domxref("MediaStream")}} with a single AudioMediaStreamTrack, which can be used in a similar way to a MediaStream obtained from {{ domxref("Navigator.getUserMedia") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.

Análise dos dados e visualização

Se você deseja extrair tempo, frequencia e outras informações do seu áudio, o AnalyserNode é o que você necessita.

{{domxref("AnalyserNode")}}
The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.

Dividindo e mesclando canais de áudio

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

{{domxref("ChannelSplitterNode")}}
The ChannelSplitterNode interface separates the different channels of an audio source out into a set of mono outputs.
{{domxref("ChannelMergerNode")}}
The ChannelMergerNode interface reunites different mono inputs into a single outputs. Each input will be used to fill a channel of the output.

Audio spatialization

These interfaces allow you to add audio spatialization panning effects to your audio sources.

{{domxref("AudioListener")}}
The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
{{domxref("PannerNode")}}
The PannerNode interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.

Processamento de áudio por JavaScript

Se você quiser usar um script externo para processar sua fonte de áudio, Node e eventos abaixo tornarão isto possível.

{{domxref("ScriptProcessorNode")}}
The ScriptProcessorNode interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
{{event("audioprocess")}} (event)
The audioprocess event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.
{{domxref("AudioProcessingEvent")}}
The Web Audio API AudioProcessingEvent represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.

Áudio offline

Manipular áudio offline é possível com estas interfaces.

{{domxref("OfflineAudioContext")}}
The OfflineAudioContext interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard AudioContext, an OfflineAudioContext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
{{event("complete")}} (event)
The complete event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{domxref("OfflineAudioCompletionEvent")}}
The OfflineAudioCompletionEvent represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.

Interfaces obsoletas

As interfaces a seguir foram definidas em versões antigas das especificações da API de Web Audio, mas agora elas estão obsoletas e serão substituidas por outras interfaces.

{{domxref("JavaScriptNode")}}
Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.
{{domxref("WaveTableNode")}}
Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.

Exemplo

Este exemplo mostra uma grande variedade de funções da API de Web Audio que podem ser utilizadas. Você pode ver este código em ação na demo Voice-change-o-matic (também verificar o código-fonte completo no Github) - esta é uma demonstração de um modificador de voz de brinquedo experimental; aconselhamos manter seus alto-falantes baixo ao utilizá-lo, pelo menos para começar!

As linhas API de Web Audio estão destacadas; se você quiser encontrar mais informações sobre os diferentes métodos, faça uma busca através das páginas de referência.

var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
// Webkit/blink browsers need prefix, Safari won't work without window.

var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
var mute = document.querySelector('.mute'); // mute button
var drawVisual; // requestAnimationFrame

var analyser = audioCtx.createAnalyser();
var distortion = audioCtx.createWaveShaper();
var gainNode = audioCtx.createGain();
var biquadFilter = audioCtx.createBiquadFilter();

function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
  var k = typeof amount === 'number' ? amount : 50,
    n_samples = 44100,
    curve = new Float32Array(n_samples),
    deg = Math.PI / 180,
    i = 0,
    x;
  for ( ; i < n_samples; ++i ) {
    x = i * 2 / n_samples - 1;
    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
  }
  return curve;
};

navigator.getUserMedia (
  // constraints - only audio needed for this app
  {
    audio: true
  },

  // Success callback
  function(stream) {
    source = audioCtx.createMediaStreamSource(stream);
    source.connect(analyser);
    analyser.connect(distortion);
    distortion.connect(biquadFilter);
    biquadFilter.connect(gainNode);
    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together

    visualize(stream);
    voiceChange();

  },

  // Error callback
  function(err) {
    console.log('The following gUM error occured: ' + err);
  }
);

function visualize(stream) {
  WIDTH = canvas.width;
  HEIGHT = canvas.height;

  var visualSetting = visualSelect.value;
  console.log(visualSetting);

  if(visualSetting == "sinewave") {
    analyser.fftSize = 2048;
    var bufferLength = analyser.frequencyBinCount; // half the FFT value
    var dataArray = new Uint8Array(bufferLength); // create an array to store the data

    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

    function draw() {

      drawVisual = requestAnimationFrame(draw);

      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above

      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

      canvasCtx.lineWidth = 2;
      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';

      canvasCtx.beginPath();

      var sliceWidth = WIDTH * 1.0 / bufferLength;
      var x = 0;

      for(var i = 0; i < bufferLength; i++) {

        var v = dataArray[i] / 128.0;
        var y = v * HEIGHT/2;

        if(i === 0) {
          canvasCtx.moveTo(x, y);
        } else {
          canvasCtx.lineTo(x, y);
        }

        x += sliceWidth;
      }

      canvasCtx.lineTo(canvas.width, canvas.height/2);
      canvasCtx.stroke();
    };

    draw();

  } else if(visualSetting == "off") {
    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    canvasCtx.fillStyle = "red";
    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
  }

}

function voiceChange() {
  distortion.curve = new Float32Array;
  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run

  var voiceSetting = voiceSelect.value;
  console.log(voiceSetting);

  if(voiceSetting == "distortion") {
    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
  } else if(voiceSetting == "biquad") {
    biquadFilter.type = "lowshelf";
    biquadFilter.frequency.value = 1000;
    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
  } else if(voiceSetting == "off") {
    console.log("Voice settings turned off"); // do nothing, as off option was chosen
  }

}

// event listeners to change visualize and voice settings

visualSelect.onchange = function() {
  window.cancelAnimationFrame(drawVisual);
  visualize(stream);
}

voiceSelect.onchange = function() {
  voiceChange();
}

mute.onclick = voiceMute;

function voiceMute() { // toggle to mute and unmute sound
  if(mute.id == "") {
    gainNode.gain.value = 0; // gain set to 0 to mute sound
    mute.id = "activated";
    mute.innerHTML = "Unmute";
  } else {
    gainNode.gain.value = 1; // gain set to 1 to unmute sound
    mute.id = "";    
    mute.innerHTML = "Mute";
  }
}

Especificações

Especificação Status Comentário
{{SpecName('Web Audio API')}} {{Spec2('Web Audio API')}}  

Compatibilidade de navegadores

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 14 {{property_prefix("webkit")}} 23 {{CompatNo}} 15 {{property_prefix("webkit")}}
22 (unprefixed)
6 {{property_prefix("webkit")}}
Feature Android Chrome Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
Basic support {{CompatNo}} 28 {{property_prefix("webkit")}} 25 1.2 {{CompatNo}} {{CompatNo}} 6 {{property_prefix("webkit")}}

 

Veja também

Revision Source

<div class="summary">
 <p>A API de Web Audio disponibiliza um poderoso e versátil sistema de controle de áudio para a Web, permitindo aos desenvolvedores escolher arquivos de áudio, adicionar efeitos a estes arquivos, criar reprodutores de áudio, aplicar <em>spatial effects</em> (como <em>panning</em>) e muito mais.</p>
</div>
<h2 id="Web_audio.3A_conceitos_e_uso">Web audio: conceitos e uso</h2>
<p><span id="result_box" lang="pt"><span class="hps">A</span> <span class="hps">API</span> <span class="hps">de&nbsp;</span><span class="hps">Web audio</span> <span class="hps">envolve</span> <span class="hps">manipulação de operações com</span> <span class="hps">áudio</span> <span class="hps">dentro de um</span> <strong><span class="hps">contexto</span> <span class="hps">de áudio</span></strong><span>,</span> <span class="hps">e foi desenvolvida</span> <span class="hps">para permitir</span> <span class="hps">o <strong>roteamento</strong></span><strong> </strong><span class="hps"><strong>modular</strong>.</span> <span class="hps">Operações</span> <span class="hps">básicas de áudio</span> <span class="hps">são feitas</span> <span class="hps">com</span> <strong><em>audio nodes </em>(nós de áudio</strong><span>), que são ligados para formar</span> <span class="hps"><strong>gráficos de</strong></span><strong> <span class="hps">roteamento</span> </strong><span class="hps"><strong>de áudio</strong>.</span> <span class="hps">Várias fontes</span> <span class="hps">-</span> <span class="hps">com diferentes tipos de</span> <span class="hps"><em>layout</em> de canal</span> <span class="hps">-</span> <span class="hps">são suportados</span>&nbsp;<span class="hps">mesmo em um único</span> <span class="hps">contexto.</span> <span class="hps">Este</span> <span class="hps"><em>design</em> modular</span> permite<span class="hps"> flexibilidade</span> <span class="hps">para criar</span> <span class="hps">funções de áudio</span> <span class="hps">complexas com</span> <span class="hps">efeitos dinâmicos</span><span>.</span></span></p>
<p><span id="result_box" lang="pt"><em><span class="hps">Audio nodes</span></em> são<span class="hps"> ligados pelas</span> <span class="hps">suas entradas e saídas</span><span>, formando</span> <span class="hps">uma cadeia</span> <span class="hps">que começa com</span> <span class="hps">uma ou mais fontes</span><span>,</span> <span class="hps">passa por</span> <span class="hps">um ou mais <em>nodes </em>e</span><span> então</span> <span class="hps">acaba</span> <span class="hps">em um destino</span> <span class="hps">(embora você</span> <span class="hps">não tenha que</span> <span class="hps">fornecer</span> <span class="hps">um destino</span><span>, por exemplo,</span> <span class="hps">se você quiser apenas</span> <span class="hps">visualizar</span> <span class="hps">alguns</span> <span class="hps">dados de áudio</span><span>)</span>. <span class="hps">Um fluxo de trabalho</span> <span class="hps">simples</span><span>, com Web áudio,</span> <span class="hps">seria algo parecido com</span> <span class="hps">isso</span><span>:</span></span></p>
<ol>
 <li>Crie um contexto de áudio</li>
 <li>Dentro do contexto, crie fontes de áudio — como <code>&lt;audio&gt;</code>, oscilador, <em>stream</em></li>
 <li>Crie efeitos de áudio, como <em>reverb</em>, <em>biquad filter</em>, <em>panner</em>, <em>compressor</em></li>
 <li>Escolha o destino final de áudio, por exemplo os auto-falantes de seu sistema</li>
 <li>Conecte as fontes de áudio com os efeitos, e os efeitos com o destino.</li>
</ol>
<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/7893/web-audio-api-flowchart.png" style="width: 635px; height: 113px; margin: 0px auto; display: block;" /></p>
<p><span id="result_box" lang="pt"><span class="hps">O sincronismo</span> <span class="hps">é controlado</span> <span class="hps">com alta precisão</span> <span class="hps">e baixa latência</span><span>,</span> <span class="hps">permitindo aos desenvolvedores</span> <span class="hps">escrever códigos que</span> <span class="hps">respondam com precisão</span> <span class="hps">a eventos</span> <span class="hps">e capazes de gerar exemplos específicos</span><span>, mesmo com</span> <span class="hps">uma</span> <span class="hps">alta</span> <span class="hps">taxa de amostragem.</span> Dessa forma, <span class="hps">aplicações como</span> <span class="hps">baterias eletrônicas</span> <span class="hps">e seqüenciadores</span> <span class="hps">estarão facilmente ao alcance dos desenvolvedores</span></span>.</p>
<p>A API de Web Audio também permite o controle de como o áudio será ordenado. Usando um sistema baseado em um&nbsp;modelo de<em> source-listener</em>, a API permite controlar os&nbsp;painéis de<em> modelo</em> para serem usados e tratados com&nbsp;atenuação de distância induzida&nbsp;ou&nbsp;<em>doppler shift</em> induzido por uma fonte em movimento (ou um ouvinte em movimento).</p>
<div class="note">
 <p><strong>Nota</strong>: Você pode ver mais detalhes sobre a teoria da API de Web Audio em nosso artigo <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a>.</p>
</div>
<h2 id="Web_Audio.3A_Interfaces_da_API">Web Audio: Interfaces da API</h2>
<p>A API de Web Audio possui um total de 28 interfaces e eventos associados, que nós dividimos e categorizamos em 9 funcionalidades.</p>
<h3 id="Defini.C3.A7.C3.B5es_gerais_de_gr.C3.A1ficos_de_.C3.A1udio_(audio_graph)">Definições gerais de gráficos de áudio (audio graph)</h3>
<p><span id="result_box" lang="pt"><span class="hps">D</span><span class="hps">efinições<span id="result_box" lang="pt"><span class="hps"> gerais</span></span></span> <span class="hps">que moldam</span> <span class="hps">os gráficos</span> <span class="hps">de áudio no uso da API de</span> <span class="hps">Web Audio</span><span>.</span></span></p>
<dl>
 <dt>
  {{domxref("AudioContext")}}</dt>
 <dd>
  <span id="result_box" lang="pt"><span class="hps">A interface</span> <strong><code><span class="hps">AudioContext</span></code></strong> <span class="hps">representa um</span> <span class="hps">gráfico</span> <span class="hps">de processamento de</span> <span class="hps">áudio</span> <span class="hps">construído a partir de</span> <span class="hps">módulos de áudio</span> <span class="hps">ligados entre si</span><span>,</span> <span class="hps">cada um representado por</span> <span class="hps">um</span> <span class="hps atn">{{domxref("AudioNode")}}</span><span>.</span> <span class="hps">Um contexto</span> <span class="hps">de áudio (audio context)</span> <span class="hps">controla a criação</span> <span class="hps">dos <em>nodes</em></span> <span class="hps">que ele contém</span> <span class="hps">e</span> <span class="hps">a execução do</span> <span class="hps">processamento de áudio,</span> <span class="hps">ou a decodificação</span><span>.</span> C<span class="hps"><span id="result_box" lang="pt"><span class="hps">omo</span> <span class="hps">tudo acontece</span> <span class="hps">dentro de um</span> <span class="hps">contexto, v</span></span>ocê deve criar</span> <span class="hps">um</span> <code><strong><span class="hps">AudioContext</span></strong></code> <span class="hps">antes de fazer</span> <span class="hps">qualquer outra coisa.</span></span></dd>
 <dt>
  {{domxref("AudioNode")}}</dt>
 <dd>
  <span id="result_box" lang="pt"><span class="hps">A interface</span> <code><strong><span class="hps">AudioNode</span></strong></code> <span class="hps">representa um</span> <span class="hps">módulo</span> <span class="hps">de processamento de</span> <span class="hps">áudio</span> <span class="hps">como</span> <span class="hps">uma fonte de áudio</span> <span class="hps">(por exemplo,</span> <span class="hps">um HTML</span> <span class="hps atn">{{HTMLElement("áudio")}} ou um elemento {{HTMLElement("vídeo")}}</span><span class="hps">)</span><span>, destino</span> <span class="hps">de áudio</span><span>,</span> <span class="hps">módulo de processamento</span> <span class="hps atn">intermediário (</span><span>por exemplo, um</span> filtro <span class="hps">como</span> <span class="hps atn">{{domxref("BiquadFilterNode")}}</span><span>,</span> <span class="hps">ou</span> <span class="hps">controle de volume</span><span>, como</span> <span class="hps atn">{{domxref("GainNode")}}).</span></span></dd>
 <dt>
  {{domxref("AudioParam")}}</dt>
 <dd>
  <span id="result_box" lang="pt"><span class="hps">A interface</span> <code><strong><span class="hps">AudioParam</span></strong></code> <span class="hps">representa um</span> <span class="hps">parâmetro</span> <span class="hps">relacionado ao</span> <span class="hps">áudio,</span> <span class="hps">como um parâmetro de</span> <span class="hps">um</span> <span class="hps atn">{{domxref("AudioNode")}}</span><span>.</span> <span class="hps">Ele pode ser configurado</span> com<span class="hps"> um valor específico</span> <span class="hps">ou</span> <span class="hps">uma</span> <span class="hps">mudança de valor,</span> <span class="hps">e pode ser</span> <span class="hps">programado para</span> <span class="hps">"acontecer"</span> <span class="hps">em um momento específico</span> <span class="hps">e seguindo</span> <span class="hps">um padrão específico.</span></span></dd>
 <dt>
  {{event("ended_(Web_Audio)", "ended")}} (event)</dt>
 <dd>
  <span id="result_box" lang="pt"><span class="hps">O evento <code>ended</code></span> <span class="hps">é disparado quando</span> <span class="hps">a reprodução</span> <span class="hps">parou porque</span> <span class="hps">o fim da</span> <span class="hps">mídia</span> <span class="hps">foi</span> <span class="hps">atingido.</span></span></dd>
</dl>
<h3 id="Definindo_fontes_de_.C3.A1udio"><span class="short_text" id="result_box" lang="pt"><span class="hps">Definindo</span> <span class="hps">fontes de áudio</span></span></h3>
<p>Interfaces que definem fontes de áudio para uso na API de Web Audio.</p>
<dl>
 <dt>
  {{domxref("OscillatorNode")}}</dt>
 <dd>
  The <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>interface represents a sine wave. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>frequency</em> of sine wave to be created.</dd>
 <dt>
  {{domxref("AudioBuffer")}}</dt>
 <dd>
  The <strong><code>AudioBuffer</code></strong> interface represents a short audio asset residing in memory, created from an audio file using the {{ domxref("AudioContext.createBuffer") }} method. Once decoded into this form, the audio can then be put into an {{ domxref("AudioBufferSourceNode") }}.</dd>
 <dt>
  {{domxref("AudioBufferSourceNode")}}</dt>
 <dd>
  The <strong><code>AudioBufferSourceNode</code></strong> interface represents an audio source consisting of in-memory audio data, stored in an {{domxref("AudioBuffer")}}. It is an {{domxref("AudioNode")}} that acts as an audio source.</dd>
 <dt>
  {{domxref("MediaElementAudioSourceNode")}}</dt>
 <dd>
  The <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.</dd>
 <dt>
  {{domxref("MediaStreamAudioSourceNode")}}</dt>
 <dd>
  The <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (such as a webcam or microphone.) It is an {{domxref("AudioNode")}} that acts as an audio source.</dd>
</dl>
<h3 id="Definindo_filtros_de_efeitos_de_.C3.A1udio">Definindo <span class="short_text" id="result_box" lang="pt"><span class="hps">filtros de efeitos</span> <span class="hps">de áudio</span></span></h3>
<p>Interfaces para definição de efeitos que você deseja aplicar em suas fontes de áudio.</p>
<dl>
 <dt>
  {{domxref("BiquadFilterNode")}}</dt>
 <dd>
  The <strong><code>BiquadFilterNode</code></strong><strong> </strong>interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices or graphic equalizers. A <code>BiquadFilterNode</code> always has exactly one input and one output.</dd>
 <dt>
  {{domxref("ConvolverNode")}}</dt>
 <dd>
  The <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>interface is an <span style="line-height: 1.5;">{{domxref("AudioNode")}} that</span><span style="line-height: 1.5;"> performs a Linear Convolution on a given AudioBuffer, often used to achieve a reverb effect</span><span style="line-height: 1.5;">.</span></dd>
 <dt>
  {{domxref("DelayNode")}}</dt>
 <dd>
  The <strong><code>DelayNode</code></strong><strong> </strong>interface represents a <a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a>; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.</dd>
 <dt>
  {{domxref("DynamicsCompressorNode")}}</dt>
 <dd>
  The <strong><code>DynamicsCompressorNode</code></strong> interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.</dd>
 <dt>
  {{domxref("GainNode")}}</dt>
 <dd>
  The <strong><code>GainNode</code></strong><strong> </strong>interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>gain</em> to be applied to the input data before its propagation to the output.</dd>
 <dt>
  {{domxref("WaveShaperNode")}}</dt>
 <dd>
  The <strong><code>WaveShaperNode</code></strong><strong> </strong>interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.</dd>
 <dt>
  {{domxref("PeriodicWave")}}</dt>
 <dd>
  Used to define a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.</dd>
</dl>
<h3 id="Definindo_destinos_de_.C3.A1udio"><span class="short_text" id="result_box" lang="pt"><span class="hps">Definindo</span> <span class="hps">destinos</span> <span class="hps">de áudio</span></span></h3>
<p>Uma vez que você tenha feito o processamento do seu áudio, estas interfaces definirão aonde será a saída do áudio.</p>
<dl>
 <dt>
  {{domxref("AudioDestinationNode")}}</dt>
 <dd>
  The <strong><code>AudioDestinationNode</code></strong> interface represents the end destination of an audio source in a given context — usually the speakers of your device.</dd>
 <dt>
  {{domxref("MediaStreamAudioDestinationNode")}}</dt>
 <dd>
  The <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio destination consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} with a single <code>AudioMediaStreamTrack</code>, which can be used in a similar way to a MediaStream obtained from {{ domxref("Navigator.getUserMedia") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.</dd>
</dl>
<h3 id="An.C3.A1lise_dos_dados_e_visualiza.C3.A7.C3.A3o"><span class="short_text" id="result_box" lang="pt"><span class="hps">Análise dos dados</span> <span class="hps">e visualização</span></span></h3>
<p>Se você deseja extrair tempo, frequencia e outras informações do seu áudio, o <code>AnalyserNode</code> é o que você necessita.</p>
<dl>
 <dt>
  {{domxref("AnalyserNode")}}</dt>
 <dd>
  The <strong><code>AnalyserNode</code></strong> interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.</dd>
</dl>
<h3 id="Dividindo_e_mesclando_canais_de_.C3.A1udio">Dividindo e mesclando canais de áudio</h3>
<p>Para dividir e mesclar canais de áudio, você utilizará essas interfaces.</p>
<dl>
 <dt>
  {{domxref("ChannelSplitterNode")}}</dt>
 <dd>
  The <code><strong>ChannelSplitterNode</strong></code> interface separates the different channels of an audio source out into a set of <em>mono</em> outputs.</dd>
 <dt>
  {{domxref("ChannelMergerNode")}}</dt>
 <dd>
  The <code><strong>ChannelMergerNode</strong></code> interface reunites different mono inputs into a single outputs. Each input will be used to fill a channel of the output.</dd>
</dl>
<h3 id="Audio_spatialization">Audio spatialization</h3>
<p>These interfaces allow you to add audio spatialization panning effects to your audio sources.</p>
<dl>
 <dt>
  {{domxref("AudioListener")}}</dt>
 <dd>
  The <strong><code>AudioListener</code></strong><strong> </strong>interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.</dd>
 <dt>
  {{domxref("PannerNode")}}</dt>
 <dd>
  The <strong><code>PannerNode</code></strong><strong> </strong>interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.</dd>
</dl>
<h3 id="Processamento_de_.C3.A1udio_por_JavaScript">Processamento de áudio por JavaScript</h3>
<p>Se você quiser usar um <em>script</em> externo para processar sua fonte de áudio, Node e eventos abaixo tornarão isto possível.</p>
<dl>
 <dt>
  {{domxref("ScriptProcessorNode")}}</dt>
 <dd>
  The <strong><code>ScriptProcessorNode</code></strong><strong> </strong>interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.</dd>
 <dt>
  {{event("audioprocess")}} (event)</dt>
 <dd>
  The <code>audioprocess</code> event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.</dd>
 <dt>
  {{domxref("AudioProcessingEvent")}}</dt>
 <dd>
  The <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code> represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.</dd>
</dl>
<h3 id=".C3.81udio_offline">Áudio <em>offline</em></h3>
<p>Manipular áudio <em>offline </em>é possível com estas interfaces.</p>
<dl>
 <dt>
  {{domxref("OfflineAudioContext")}}</dt>
 <dd>
  The <strong><code>OfflineAudioContext</code></strong> interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard <code>AudioContext</code>, an <code>OfflineAudioContext</code> doesn't really render the audio but rather generates it, <em>as fast as it can</em>, in a buffer.</dd>
 <dt>
  {{event("complete")}} (event)</dt>
 <dd>
  The <code>complete</code> event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.</dd>
 <dt>
  {{domxref("OfflineAudioCompletionEvent")}}</dt>
 <dd>
  The <code>OfflineAudioCompletionEvent</code> represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.</dd>
</dl>
<h2 id="Example" name="Example"><span class="short_text" id="result_box" lang="pt"><span class="hps">Interfaces</span> <span class="hps">obsoletas</span></span></h2>
<p>As interfaces a seguir foram definidas em versões antigas das especificações da API de Web Audio, mas agora elas estão obsoletas e serão substituidas por outras interfaces.</p>
<dl>
 <dt>
  {{domxref("JavaScriptNode")}}</dt>
 <dd>
  Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd>
 <dt>
  {{domxref("WaveTableNode")}}</dt>
 <dd>
  Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd>
</dl>
<h2 id="Example" name="Example">Exemplo</h2>
<p><span id="result_box" lang="pt"><span class="hps">Este exemplo mostra</span> <span class="hps">uma grande variedade de</span> <span class="hps">funções da API de</span> <span class="hps">Web</span> A<span class="hps">udio</span> <span class="hps">que podem ser utilizadas.</span> <span class="hps">Você pode ver</span> <span class="hps">este código</span> <span class="hps">em ação na demo </span><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> <span class="hps atn">(</span><span>também verificar</span> <span class="hps">o <a href="https://github.com/mdn/voice-change-o-matic">código-fonte completo no Github</a></span><span>)</span> <span class="hps">- esta é uma demonstração de um</span> <span class="hps">modificador de voz</span> de <span class="hps">brinquedo</span> <span class="hps">experimental</span><span>;</span> aconselhamos <span class="hps">manter seus</span> <span class="hps">alto-falantes</span> <span class="hps">baixo</span> <span class="hps">ao</span> <span class="hps">utilizá-lo,</span> <span class="hps">pelo menos para começar</span><span>!</span></span></p>
<p><span id="result_box" lang="pt"><span class="hps">As linhas</span> <span class="hps">API</span> <span class="hps">de Web Audio</span> <span class="hps">estão destacadas</span><span>;</span> <span class="hps">se você quiser</span> <span class="hps">encontrar mais informações</span> <span class="hps">sobre&nbsp;</span><span class="hps">os diferentes métodos</span><span>, </span>faça<span class="hps"> uma busca</span> <span class="hps">através das</span> <span class="hps">páginas de referência.</span></span></p>
<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
// Webkit/blink browsers need prefix, Safari won't work without window.

var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
var mute = document.querySelector('.mute'); // mute button
var drawVisual; // requestAnimationFrame

var analyser = audioCtx.createAnalyser();
var distortion = audioCtx.createWaveShaper();
var gainNode = audioCtx.createGain();
var biquadFilter = audioCtx.createBiquadFilter();

function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
  var k = typeof amount === 'number' ? amount : 50,
    n_samples = 44100,
    curve = new Float32Array(n_samples),
    deg = Math.PI / 180,
    i = 0,
    x;
  for ( ; i &lt; n_samples; ++i ) {
    x = i * 2 / n_samples - 1;
    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
  }
  return curve;
};

navigator.getUserMedia (
  // constraints - only audio needed for this app
  {
    audio: true
  },

  // Success callback
  function(stream) {
    source = audioCtx.createMediaStreamSource(stream);
    source.connect(analyser);
    analyser.connect(distortion);
    distortion.connect(biquadFilter);
    biquadFilter.connect(gainNode);
    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together

    visualize(stream);
    voiceChange();

  },

  // Error callback
  function(err) {
    console.log('The following gUM error occured: ' + err);
  }
);

function visualize(stream) {
  WIDTH = canvas.width;
  HEIGHT = canvas.height;

  var visualSetting = visualSelect.value;
  console.log(visualSetting);

  if(visualSetting == "sinewave") {
    analyser.fftSize = 2048;
    var bufferLength = analyser.frequencyBinCount; // half the FFT value
    var dataArray = new Uint8Array(bufferLength); // create an array to store the data

    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

    function draw() {

      drawVisual = requestAnimationFrame(draw);

      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above

      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

      canvasCtx.lineWidth = 2;
      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';

      canvasCtx.beginPath();

      var sliceWidth = WIDTH * 1.0 / bufferLength;
      var x = 0;

      for(var i = 0; i &lt; bufferLength; i++) {

        var v = dataArray[i] / 128.0;
        var y = v * HEIGHT/2;

        if(i === 0) {
          canvasCtx.moveTo(x, y);
        } else {
          canvasCtx.lineTo(x, y);
        }

        x += sliceWidth;
      }

      canvasCtx.lineTo(canvas.width, canvas.height/2);
      canvasCtx.stroke();
    };

    draw();

  } else if(visualSetting == "off") {
    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    canvasCtx.fillStyle = "red";
    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
  }

}

function voiceChange() {
  distortion.curve = new Float32Array;
  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run

  var voiceSetting = voiceSelect.value;
  console.log(voiceSetting);

  if(voiceSetting == "distortion") {
    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
  } else if(voiceSetting == "biquad") {
    biquadFilter.type = "lowshelf";
    biquadFilter.frequency.value = 1000;
    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
  } else if(voiceSetting == "off") {
    console.log("Voice settings turned off"); // do nothing, as off option was chosen
  }

}

// event listeners to change visualize and voice settings

visualSelect.onchange = function() {
  window.cancelAnimationFrame(drawVisual);
  visualize(stream);
}

voiceSelect.onchange = function() {
  voiceChange();
}

mute.onclick = voiceMute;

function voiceMute() { // toggle to mute and unmute sound
  if(mute.id == "") {
    gainNode.gain.value = 0; // gain set to 0 to mute sound
    mute.id = "activated";
    mute.innerHTML = "Unmute";
  } else {
    gainNode.gain.value = 1; // gain set to 1 to unmute sound
    mute.id = "";    
    mute.innerHTML = "Mute";
  }
}
</pre>
<h2 id="Especifica.C3.A7.C3.B5es">Especificações</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Audio API')}}</td>
   <td>{{Spec2('Web Audio API')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
<div>
 {{CompatibilityTable}}</div>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>14 {{property_prefix("webkit")}}</td>
    <td>23</td>
    <td>{{CompatNo}}</td>
    <td>15 {{property_prefix("webkit")}}<br />
     22 (unprefixed)</td>
    <td>6 {{property_prefix("webkit")}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Chrome</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>Firefox OS</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatNo}}</td>
    <td>28 {{property_prefix("webkit")}}</td>
    <td>25</td>
    <td>1.2</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>6 {{property_prefix("webkit")}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id=".C2.A0">&nbsp;</h2>
<h2 id="Veja_tamb.C3.A9m">Veja também</h2>
<ul>
 <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
 <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
 <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li>
 <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li>
 <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
 <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
 <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
 <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
 <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
</ul>
<section id="Quick_Links">
 <h3 id="Quicklinks">Quicklinks</h3>
 <ol>
  <li data-default-state="open"><strong><a href="#">Guides</a></strong>
   <ol>
    <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li>
    <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
    <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
    <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
    <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
   </ol>
  </li>
  <li data-default-state="open"><strong><a href="#">Examples</a></strong>
   <ol>
    <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li>
    <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li>
   </ol>
  </li>
  <li data-default-state="open"><strong><a href="#">Interfaces</a></strong>
   <ol>
    <li>{{domxref("AnalyserNode")}}</li>
    <li>{{domxref("AudioBuffer")}}</li>
    <li>{{domxref("AudioBufferSourceNode")}}</li>
    <li>{{domxref("AudioContext")}}</li>
    <li>{{domxref("AudioDestinationNode")}}</li>
    <li>{{domxref("AudioListener")}}</li>
    <li>{{domxref("AudioNode")}}</li>
    <li>{{domxref("AudioParam")}}</li>
    <li>{{event("audioprocess")}} (event)</li>
    <li>{{domxref("AudioProcessingEvent")}}</li>
    <li>{{domxref("BiquadFilterNode")}}</li>
    <li>{{domxref("ChannelMergerNode")}}</li>
    <li>{{domxref("ChannelSplitterNode")}}</li>
    <li>{{event("complete")}} (event)</li>
    <li>{{domxref("ConvolverNode")}}</li>
    <li>{{domxref("DelayNode")}}</li>
    <li>{{domxref("DynamicsCompressorNode")}}</li>
    <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
    <li>{{domxref("GainNode")}}</li>
    <li>{{domxref("MediaElementAudioSourceNode")}}</li>
    <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
    <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
    <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
    <li>{{domxref("OfflineAudioContext")}}</li>
    <li>{{domxref("OscillatorNode")}}</li>
    <li>{{domxref("PannerNode")}}</li>
    <li>{{domxref("PeriodicWaveNode")}}</li>
    <li>{{domxref("ScriptProcessorNode")}}</li>
    <li>{{domxref("WaveShaperNode")}}</li>
   </ol>
  </li>
 </ol>
</section>
Revert to this revision