mozilla

Revision 652189 of ScriptProcessorNode

  • Revision slug: Web/API/ScriptProcessorNode
  • Revision title: ScriptProcessorNode
  • Revision id: 652189
  • Created:
  • Creator: DavidWalsh
  • Is current revision? No
  • Comment

Revision Content

{{ draft() }}

{{WebAudioRef}}

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.

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.

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 256 and 16384, that is 256, 512, 1024, 2048, 4096, 8192 or 16384. Small numbers lower the latency, 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.

  • Number of inputs 1
  • Number of outputs 1
  • Channel count mode "max"
  • Channel count 2 (not used in the default count mode)
  • Channel interpretation "speakers"

Properties

Inherits properties from its parent, {{domxref("AudioNode")}}.

{{domxref("ScriptProcessNode.bufferSize")}} {{readonlyInline}}
Returns an integer representing both the input and output buffer size. It is a power of 2 value between 256 and 16384, included.

Event handlers

{{domxref("ScriptProcessorNode.onaudioprocess")}}
Represents the {{domxref("EventHandler")}} to be called.

Methods

No specific methods; inherits methods from its parent, {{domxref("AudioNode")}}.

Examples

Example: Generating a sine wave

The following example shows basic usage of a ScriptProcessorNode to generate a sine wave.

var context = new AudioContext();

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

var volume = .5;

// The frequncy of the sine wave tone
var frequency = 440;

// Give the node a function to process audio events
audioNode.onaudioprocess = function(audioProcessingEvent) {

  // The output buffer contains the samples that will be modified and played
  var outputBuffer = audioProcessingEvent.outputBuffer;

  // Loop through the output channels (in this case there is only one)
  for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    var outData = outputBuffer.getChannelData(channel);

    // Loop through the 4096 samples
    for (var sample = 0; sample < outputBuffer.length; sample++) {

      // The time at which the sample will play
      var sampleTime = context.currentTime + outputBuffer.duration * sample / outputBuffer.length;

      // Set the data in the output buffer for each sample
      outData[sample] = volume * Math.sin(sampleTime * frequency * Math.PI * 2);
    }
  }
}

// Connect the node to the context to start playing the sound
audioNode.connect(context.destination); // Connect to speakers

Specifications

Specification Status Comment
{{SpecName('Web Audio API', '#ScriptProcessorNode-section', 'ScriptProcessorNode')}} {{Spec2('Web Audio API')}}  

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}}{{property_prefix("webkit")}} Activated on Nightly only {{CompatNo}} {{CompatNo}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} Activated on Nightly only {{CompatNo}} {{CompatNo}} {{CompatUnknown}}

See also

  • Using Web Audio

Revision Source

<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);

var volume = .5;

// The frequncy of the sine wave tone
var frequency = 440;

// Give the node a function to process audio events
audioNode.onaudioprocess = function(audioProcessingEvent) {

  // The output buffer contains the samples that will be modified and played
  var outputBuffer = audioProcessingEvent.outputBuffer;

  // Loop through the output channels (in this case there is only one)
  for (var channel = 0; channel &lt; outputBuffer.numberOfChannels; channel++) {
    var outData = outputBuffer.getChannelData(channel);

    // Loop through the 4096 samples
    for (var sample = 0; sample &lt; outputBuffer.length; sample++) {

      // The time at which the sample will play
      var sampleTime = context.currentTime + outputBuffer.duration * sample / outputBuffer.length;

      // Set the data in the output buffer for each sample
      outData[sample] = volume * Math.sin(sampleTime * frequency * Math.PI * 2);
    }
  }
}

// Connect the node to the context to start playing the sound
audioNode.connect(context.destination); // Connect to speakers
</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>
Revert to this revision