path: root/files/es/tools/web_audio_editor/index.html

---
title: Editor de audio web
slug: Tools/Editor_Audio_Web
translation_of: Tools/Web_Audio_Editor
---
<div class="geckoVersionNote">
 <p>El editor de audio web es nuevo en Firefox 32.</p>
</div>
<p>Con la <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">API de Audio Web</a>, los desarrolladores crean un <a href="/en-US/docs/Web/API/AudioContext">contexto de audio</a>. Dentro de ese contexto construyen un número de  <a href="/en-US/docs/Web/API/AudioNode">nodos de audio</a>, incluyendo:</p>
<ul>
 <li>nodos que proporcionan la <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_sources">fuente del audio</a>, como un oscilador o una fuente de buffer de datos</li>
 <li>nodos que realizan <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">transformaciones</a> como delay y ganancia</li>
 <li>nodos que representan el <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_destinations">destino del flujo de audio</a>, como los altavoces</li>
</ul>
<p>Cada nodo tiene cero o más propiedades <code><a href="/en-US/docs/Web/API/AudioParam">AudioParam</a></code> que configuran su operación. Por ejemplo, <code><a href="/en-US/docs/Web/API/GainNode">GainNode</a></code> tiene solamente la propiedad <code>gain</code>, mientras que <a href="/en-US/docs/Web/API/OscillatorNode"><code>OscillatorNode</code></a> tiene las propiedades <code>frequency</code> y <code>detune</code>.</p>
<p>El desarrollador conecta los nodos en un gráfico y ese gráfico completo define el comportamiento del flujo de audio.</p>
<p>El editor de audio web examina un contexto de audio construido en la página y proporciona una visualización de su gráfico. Esto da una vista de alto nivel de su operación y permite asegurar que todos los nodos están conectados de la forma esperada. Entonces se pueden examinar y editar las propiedades <code>AudioParam</code> para cada nodo del gráfico. Algunas propiedades no-<code>AudioParam</code>, como una propiedad <code>OscillatorNode</code>'s <code>type</code> son mostradas y también se pueden editar.</p>
<p>Esta herramienta todavía es experimental. Si encuentra errores, nos encantaría que los <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor">informe en Bugzilla</a>. Si tiene alguna opinión o sugerencias para nuevas funcionalidades, <a href="http://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas">ffdevtools.uservoice.com</a> o <a href="http://twitter.com/firefoxdevtools">Twitter</a> son lugares excelentes para registrarlas.</p>
<h2 id="Abriendo_el_editor_de_audio_web">Abriendo el editor de audio web</h2>
<p>El editor de audio web no está habilitado por defecto en Firefox 32. Para habilitarlo, abra la <a href="/es/docs/Tools/Tools_Toolbox#Configuraciones">Configuración de herramientas de desarrollador</a> y marque "Audio web". Ahora debería haber una pestaña extra en la <a href="/es/docs/Tools/Tools_Toolbox#Barra_de_herramientas">Barra de herramientas</a> llamada "Audio web". Haga clic en esa pestaña y cargue una página que construya un contexto de audio. Dos demos interesantes son:</p>
<ul>
 <li><a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>, puede aplicar varios efectos a la entrada de micrófono y también muestra una visualización del resultado</li>
 <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, cambia el tono y el volumen de una onda sinusoidal al mover el puntero del mouse</li>
</ul>
<h2 id="Visualizando_el_gráfico">Visualizando el gráfico</h2>
<p>El editor de audio web ahora mostrará el gráfico del contexto de audio cargado. Aquí está el gráfico del demo de Violent Theremin:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7941/web-audio-editor-graph.png" style="display: block; margin-left: auto; margin-right: auto;">Se puede ver que usa tres nodos: un <a href="/en-US/docs/Web/API/OscillatorNode"><code>OscillatorNode</code></a> como fuente, un <a href="/en-US/docs/Web/API/GainNode"><code>GainNode</code></a> para controlar el volumen y un <a href="/en-US/docs/Web/API/AudioDestinationNode"><code>AudioDestinationNode</code></a> como destino.</p>
<h2 id="Inspeccionando_y_modificando_AudioNodes">Inspeccionando y modificando AudioNodes</h2>
<p>Si hace clic en un nodo, se restalta y aparece un inspector del nodo en el lado derecho. Ahí se listan los valores de las propiedades del nodo <code>AudioParam</code>. Por ejemplo, así se ve el OscillatorNode:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7943/web-audio-editor-inspect-node.png" style="display: block; margin-left: auto; margin-right: auto;">Con el demo de Violent Theremin, el parámetro frecuencia es modificado cuando el usuario mueve el mouse hacia la izquierda o la derecha y eso se puede ver reflejado en el inspector del nodo. Sin embargo, el valor no es actualizado en tiempo real: hay que hacer clic en el nodo nuevamente para ver el valor actualizado.</p>
<p>Si se hace clic en el valor en el inspector del nodo se puede modificar: presione Intro o Tab y el nuevo valor tiene efecto inmediatamente.</p>