Web Audio Editor

Com o Web Audio API, os desenvolvedores criam um audio context. Dentro deste contexto eles então constroem um número de audio nodes, incluindo:

• nós fornecendo a fonte de áudio, tal como um oscilador ou uma fonte de buffer de dados.
• nós executando transformações como as de atraso e ganho.
• nós representando o destino da stream de áudio, como nos alto-falantes.

Cada nó possui 0 ou mais AudioParam propriedades que configura seu funcionamento. Por exemplo, o GainNode tem uma única propriedade de ganho , enquanto o OscillatorNode tem propriedades de frequência e de desafinação.

O desenvolvedor conecta os nós em um gráfico, e o gráfico completo define o comportamento da stream de áudio.

O Web Audio Editor examina um contexto de áudio construído na página e fornece uma visualização de seu gráfico. Isto dá-lhe uma visão de alto nível do seu funcionamento, e permite que você garanta que todos os nós estão conectados na forma como você espera.Você pode então examinar e editar as propriedades do AudioParam para cada nó no gráfico. Algumas propriedades não-AudioParam, como a propriedade de um OscillatorNode's type, são mostrada, e você pode editá-las como bem quiser.

Esta ferramenta ainda é experimental. Se você encontrar bugs, adoraríamos se você reportasse-os no Bugzilla. Se você tem um feedback ou sugestões para novas funcionalidades, ffdevtools.uservoice.com ou Twitter são ótimos lugares para registrá-los.

Abrindo o Web Audio Editor

O Web Audio Editor não está habilitado por padrão no Firefox 32. Para isso, abra a Developer Tool Settings e marque "Web Audio". Agora deve haver uma aba extra na Toolbox toolbar chamada "Web Audio". Clique na aba e abra uma página que construa um contexto de áudio. Duas boas demos são:

• the Voice-change-O-Matic, which can apply various effects to the microphone input and also provides a visualisation of the result
• the Violent Theremin, which changes the pitch and volume of a sine wave as you move the mouse pointer

Visualizando o gráfico

O Web Audio Editor irá agora mostrar o gráfico para o contexto de áudio carregado. Aqui está o gráfico para a demo Theremin Violent:

You can see that it uses three nodes: an OscillatorNode as the source, a GainNode to control the volume, and an GainNode as the destination.

Connections to AudioParams

Connections between nodes are displayed as solid lines. If, instead, you've connected a node to an AudioParam in another node, then the connection is shown as a dashed line between the nodes, and is labeled with the name of the AudioParam:

Inspecting and modifying AudioNodes

If you click on a node, it's highlighted and you get a node inspector on the right hand side. This list the values of that node's AudioParam properties. For example, here's what the OscillatorNode looks like:

With the Violent Theremin demo, the frequency parameter is modified as the user moves the mouse left and right, and you can see this reflected in the node inspector. However, the value isn't updated in real time: you have to click the node again to see the updated value.

If you click on a value in the node inspector you can modify it: press Enter or Tab and the new value takes effect immediately.

Bypassing nodes

In the pane that shows you the node's details, there's an on/off button:

Click it, and the graph will be modified to bypass this node, so it will no longer have any effect. Nodes that are bypassed are shown with a hatched background: