path: root/files/pt-pt/tools/web_audio_editor/index.html

---
title: Editor de Áudio da Web
slug: Tools/Editor_de_audio_da_Web
tags:
  - API Áudio Web
  - Ferramentas
  - Firefox
  - Mozilla
translation_of: Tools/Web_Audio_Editor
---
<div>{{ToolsSidebar}}</div><p>With the <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API</a>, developers create an {{domxref ("AudioContext", "audio context")}}. Within that context they then construct a number of {{domxref ("AudioNode", "audio nodes")}}, including:</p>

<ul>
 <li>nodes providing the <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_sources">audio source</a>, such as an oscillator or a data buffer source</li>
 <li>nodes performing <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">transformations</a> such as delay and gain</li>
 <li>nodes representing the <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_destinations">destination of the audio stream</a>, such as the speakers</li>
</ul>

<p>Each node has zero or more {{domxref ("AudioParam")}} properties that configure its operation. For example, the {{domxref ("GainNode")}} has a single <code>gain</code> property, while the {{domxref ("OscillatorNode")}} has <code>frequency</code> and <code>detune</code> properties.</p>

<p>The developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream.</p>

<p>The Web Audio Editor examines an audio context constructed in the page and provides a visualization of its graph. This gives you a high-level view of its operation, and enables you to ensure that all the nodes are connected in the way you expect. You can then examine and edit the <code>AudioParam</code> properties for each node in the graph. Some non-<code>AudioParam</code> properties, like an <code>OscillatorNode</code>'s <code>type</code> property, are displayed, and you can edit these as well.</p>

<p>This tool is still experimental. If you find bugs, we'd love it if you <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor">filed them in Bugzilla</a>. If you have feedback or suggestions for new features, <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools</a> or <a href="https://twitter.com/firefoxdevtools">Twitter</a> are great places to register them.</p>

<h2 id="Abrir_o_Editor_de_Áudio_da_Web">Abrir o Editor de Áudio da Web</h2>

<p>The Web Audio Editor is not enabled by default in Firefox 32. To enable it, open the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">Developer Tool Settings</a> and check "Web Audio". Now there should be an extra tab in the <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">Toolbox toolbar</a> labeled "Web Audio". Click the tab and load a page that constructs an audio context. Two good demos are:</p>

<ul>
 <li>the <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>, which can apply various effects to the microphone input and also provides a visualisation of the result</li>
 <li>the <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, which changes the pitch and volume of a sine wave as you move the mouse pointer</li>
</ul>

<h2 id="Visualizar_o_gráfico">Visualizar o gráfico</h2>

<p>The Web Audio Editor will now display the graph for the loaded audio context. Here's the graph for the Violent Theremin demo:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10171/web-audio-editor.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;">You can see that it uses three nodes: an {{domxref ("OscillatorNode")}} as the source, a {{domxref ("GainNode")}} to control the volume, and an {{domxref ("GainNode")}} as the destination.</p>

<h3 id="Ligações_para_Parâmetros_de_Áudio">Ligações para Parâmetros de Áudio</h3>

<div class="geckoVersionNote">
<p>Displaying connections to AudioParams is new in Firefox 34.</p>
</div>

<p>As ligações entre os nodos são exibidas como linhas sólidas. Se, em vez disso, <a href="/pt-PT/docs/Web/API/AudioNode/connect_Parametro_de_Audio">ligou um nodo para uma Parâmetro de Áudio em outro nodo</a>, então a ligação é mostrada como uma linha tracejada entre os nodos, e é etiquetada com o nome de '<code>AudioParam'</code>:<img alt="" src="https://mdn.mozillademos.org/files/8819/web%20audio-editor-connect-param.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h2 id="Inspecionar_e_modificar_Nodos_de_Áudio">Inspecionar e modificar Nodos de Áudio</h2>

<p>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 <code>AudioParam</code> properties. For example, here's what the OscillatorNode looks like:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10173/web-audio-editor-props.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;">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.</p>

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

<h2 id="Ignorar_nodos">Ignorar nodos</h2>

<div class="geckoVersionNote">
<p>Novo no Firefox 38.</p>
</div>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/10183/web-audio-editor-on-off.png" style="display: block; height: 97px; margin-left: auto; margin-right: auto; width: 316px;">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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10181/web-audio-editor-bypassed.png" style="display: block; height: 74px; margin-left: auto; margin-right: auto; width: 348px;"></p>