Revision 642409 of ScriptProcessorNode

<p>{{ draft() }}</p>
<p>{{WebAudioRef}}</p>
<div class="summary">
 <p><span class="seoSummary">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.</span></p>
</div>
<p><img alt="The ScriptProcessorNode stores the input in a buffer, send the audioprocess event. The EventHandler takes the input buffer and fill the output buffer which is sent to the output by the ScriptProcessorNode." src="https://mdn.mozillademos.org/files/5157/WebAudioScriptProcessingNode.png" style="width: 306px; height: 174px; margin: 0px auto; display: block;" /></p>
<p>The size of the input and output buffer are defined at the creation time, when the {{domxref("AudioContext.createScriptProcessor()")}} factory method is called. The buffer size must be a power of 2 between <code>256</code> and <code>16384</code>, that is <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code> or <code>16384</code>. Small numbers lower the <em>latency</em>, but large number may be necessary to avoid audio breakup and glitches. If the size of the buffers isnot defined, which is recommended, the browser will pick one that its heuristic deems appropriate.</p>
<ul class="audionodebox">
 <li><dfn>Number of inputs</dfn> <code>1</code></li>
 <li><dfn>Number of outputs</dfn> <code>1</code></li>
 <li><dfn>Channel count mode</dfn> <code>"max"</code></li>
 <li><dfn>Channel count</dfn> <code>2</code> (not used in the default count mode)</li>
 <li><dfn>Channel interpretation</dfn> <code>"speakers"</code></li>
</ul>
<h2 id="Properties">Properties</h2>
<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
<dl>
 <dt>
  {{domxref("ScriptProcessNode.bufferSize")}} {{readonlyInline}}</dt>
 <dd>
  Returns an integer representing both the input and output buffer size. It is a power of 2 value between <code>256</code> and <code>16384</code>, included.</dd>
</dl>
<h3 id="Event_handlers">Event handlers</h3>
<dl>
 <dt>
  {{domxref("ScriptProcessorNode.onaudioprocess")}}</dt>
 <dd>
  Represents the {{domxref("EventHandler")}} to be called.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>No specific methods; inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
<h2 id="Examples">Examples</h2>
<h3 id="Example:_Generating_a_sine_wave" name="Example:_Generating_a_sine_wave">Example: Generating a sine wave</h3>
<p>The following example shows basic usage of a ScriptProcessorNode to generate a sine wave.</p>
<pre class="brush: js">
var context = new AudioContext();

// Create a ScriptProcessorNode with a bufferSize of 4096 and a single output channel
var audioNode = context.createScriptProcessor(4096, 0, 1);

<span class="token keyword">var</span> volume <span class="token operator">=</span> <span class="token punctuation">.</span><span class="token number">5</span><span class="token punctuation">;</span>

// The frequncy of the sine wave tone
<span class="token keyword">var</span> frequency <span class="token operator">=</span> <span class="token number">440</span><span class="token punctuation">;</span>

// Give the node a function to process audio events
audioNode<span class="token punctuation">.</span>onaudioprocess <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>audioProcessingEvent<span class="token punctuation">)</span> <span class="token punctuation">{</span>

  // The output buffer contains the samples that will be modified and played
<span class="token keyword">  var</span> outputBuffer <span class="token operator">=</span> audioProcessingEvent<span class="token punctuation">.</span>outputBuffer<span class="token punctuation">;</span>

  // Loop through the output channels (in this case there is only one)
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> channel <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> channel <span class="token operator">&lt;</span> outputBuffer<span class="token punctuation">.</span>numberOfChannels<span class="token punctuation">;</span> channel<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> outData <span class="token operator">=</span> outputBuffer<span class="token punctuation">.</span><span class="token function">getChannelData<span class="token punctuation">(</span></span>channel<span class="token punctuation">)</span><span class="token punctuation">;</span>

    // Loop through the 4096 samples
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> sample <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> sample <span class="token operator">&lt;</span> outputBuffer<span class="token punctuation">.</span>length<span class="token punctuation">;</span> sample<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

      // The time at which the sample will play
      <span class="token keyword">var</span> sampleTime <span class="token operator">=</span> context.currentTime <span class="token operator">+</span> outputBuffer<span class="token punctuation">.</span>duration <span class="token operator">*</span> sample <span class="token operator">/</span> outputBuffer<span class="token punctuation">.</span>length<span class="token punctuation">;</span>

      // Set the data in the output buffer for each sample
      outData<span class="token punctuation">[</span>sample<span class="token punctuation">]</span> <span class="token operator">=</span> volume <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">sin<span class="token punctuation">(</span></span>sampleTime <span class="token operator">*</span> frequency <span class="token operator">*</span> Math<span class="token punctuation">.</span>PI <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

// Connect the node to the context to start playing the sound
audioNode<span class="token punctuation">.</span><span class="token function">connect<span class="token punctuation">(</span></span>context<span class="token punctuation">.</span>destination<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true"> // Connect to speakers</span>
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Audio API', '#ScriptProcessorNode-section', 'ScriptProcessorNode')}}</td>
   <td>{{Spec2('Web Audio API')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</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>{{CompatVersionUnknown}}{{property_prefix("webkit")}}</td>
    <td>Activated on Nightly only</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatUnknown}}</td>
    <td>Activated on Nightly only</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
 <li>Using Web Audio</li>
</ul>