Revision 980063 of AudioBufferSourceNode

<p>{{APIRef("Web Audio API")}}</p>

<div class="summary">
<p><span class="seoSummary">The <strong><code>AudioBufferSourceNode</code></strong><strong> </strong>interface represents an audio source consisting of in-memory audio data, stored in an {{domxref("AudioBuffer")}}. It is an {{domxref("AudioNode")}} that acts as an audio source<code>.</code></span></p>
</div>

<p><code>AudioBufferSourceNode</code> has no input and exactly one output. The number of channels in the output corresponds to the number of channels of the {{domxref("AudioBuffer")}} that is set to the <code>AudioBufferSourceNode.buffer</code> property. If there is no buffer set—that is, if the attribute's value is <code>NULL</code>—the output contains one channel consisting of silence. An {{domxref("AudioBufferSourceNode")}} can only be played once; that is, only one call to <code>AudioBufferSourceNode.start()</code> is allowed. If the sound needs to be played again, another <code>AudioBufferSourceNode</code> has to be created. Those nodes are cheap to create, and <code>AudioBuffer</code>s can be reused across plays. It is often said that <code>AudioBufferSourceNode</code>s have to be used in a "fire and forget" fashion: once it has been started, all references to the node can be dropped, and it will be garbage-collected automatically.</p>

<p>Multiple calls to <code>AudioBufferSourceNode.stop()</code> are allowed. The most recent call replaces the previous one, granted the <code>AudioBufferSourceNode</code> has not already reached the end of the buffer.</p>

<p><br />
 <img alt="The AudioBufferSourceNode takes the content of an AudioBuffer and m" src="https://mdn.mozillademos.org/files/9717/WebAudioAudioBufferSourceNode.png" style="display:block; height:193px; margin:0px auto; width:365px" /></p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Number of inputs</th>
   <td><code>0</code></td>
  </tr>
  <tr>
   <th scope="row">Number of outputs</th>
   <td><code>1</code></td>
  </tr>
  <tr>
   <th scope="row">Channel count</th>
   <td>defined by the associated {{domxref("AudioBuffer")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Properties">Properties</h2>

<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>

<dl>
 <dt>{{domxref("AudioBufferSourceNode.buffer")}}&nbsp;<strong style="font-weight:bold">{{deprecated_inline}}</strong></dt>
 <dd>Is an {{domxref("AudioBuffer")}} that defines the audio asset to be played, or when set to the value <code>null</code>, defines a single channel of silence.&nbsp;</dd>
 <dt>{{domxref("AudioBufferSourceNode.detune")}}</dt>
 <dd>Is a {{k-rate}} {{domxref("AudioParam")}} representing detuning of oscillation in <a href="https://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>. Its default value is <code>0</code>.</dd>
 <dt>{{domxref("AudioBufferSourceNode.loop")}}</dt>
 <dd>Is a Boolean attribute indicating if the audio asset must be replayed when the end of the {{domxref("AudioBuffer")}} is reached. Its default value is <code>false</code>.</dd>
 <dt>{{domxref("AudioBufferSourceNode.loopStart")}}</dt>
 <dd>Is a double value indicating, in seconds, where in the {{domxref("AudioBuffer")}} the restart of the play must happen. Its default value is <code>0</code>.</dd>
 <dt>{{domxref("AudioBufferSourceNode.loopEnd")}}</dt>
 <dd>Is a double value indicating, in seconds, where in the {{domxref("AudioBuffer")}} the replay of the play must stop (and eventually loop again). Its default value is <code>0</code>.</dd>
 <dt>{{domxref("AudioBufferSourceNode.playbackRate")}}</dt>
 <dd>Is an <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}} that defines the speed factor at which the audio asset will be played. Since no pitch correction is applied on the output, this can be used to change the pitch of the sample.</dd>
</dl>

<h3 id="Event_handlers">Event handlers</h3>

<dl>
 <dt>{{domxref("AudioBufferSourceNode.onended")}}</dt>
 <dd>Is an {{domxref("EventHandler")}} containing the callback associated with the {{event("ended_(Web_Audio)", "ended")}} event.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>Inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>

<dl>
 <dt>{{domxref("AudioBufferSourceNode.start()")}}</dt>
 <dd>Schedules the start of the playback of the audio asset.</dd>
 <dt>{{domxref("AudioBufferSourceNode.stop()")}}</dt>
 <dd>Schedules the end of the playback of an audio asset.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>In this example, we create a two-second buffer, fill it with white noise, and then play it via an <code>AudioBufferSourceNode</code>. The comments should clearly explain what is going on.</p>

<div class="note">
<p><strong>Note</strong>: You can also <a class="external external-icon" href="https://mdn.github.io/audio-buffer/">run the code live</a>, or <a class="external external-icon" href="https://github.com/mdn/audio-buffer">view the source</a>.</p>
</div>

<pre class="brush: js">
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var button = document.querySelector('button');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');

pre.innerHTML = myScript.innerHTML;

// Stereo
var channels = 2;
// Create an empty two-second stereo buffer at the
// sample rate of the AudioContext
var frameCount = audioCtx.sampleRate * 2.0;

var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);

button.onclick = function() {
  // Fill the buffer with white noise;
  //just random values between -1.0 and 1.0
  for (var channel = 0; channel &lt; channels; channel++) {
   // This gives us the actual ArrayBuffer that contains the data
   var nowBuffering = myArrayBuffer.getChannelData(channel);
   for (var i = 0; i &lt; frameCount; i++) {
     // Math.random() is in [0; 1.0]
     // audio needs to be in [-1.0; 1.0]
     nowBuffering[i] = Math.random() * 2 - 1;
   }
  }

  // Get an AudioBufferSourceNode.
  // This is the AudioNode to use when we want to play an AudioBuffer
  var source = audioCtx.createBufferSource();
  // set the buffer in the AudioBufferSourceNode
  source.buffer = myArrayBuffer;
  // connect the AudioBufferSourceNode to the
  // destination so we can hear the sound
  source.connect(audioCtx.destination);
  // start the source playing
  source.start();
}</pre>

<div class="note">
<p><strong>Note</strong>: For a <code>decodeAudioData</code> example, see the {{domxref("AudioContext.decodeAudioData")}} page.</p>
</div>

<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', '#the-audiobuffersourcenode-interface', 'AudioBufferSourceNode')}}</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>14 {{property_prefix("webkit")}}<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop("23.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>15&nbsp;{{property_prefix("webkit")}}<br />
    22</td>
   <td>6 {{property_prefix("webkit")}}</td>
  </tr>
  <tr>
   <td><code>detune</code> property</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("40.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</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>Chrome</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>28&nbsp;{{property_prefix("webkit")}}<sup>[1]</sup></td>
   <td>{{CompatGeckoMobile("25.0")}}</td>
   <td>1.2</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>6&nbsp;{{property_prefix("webkit")}}</td>
  </tr>
  <tr>
   <td><code>detune</code> property</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] As of Chrome 42.0 setting AudioBufferSourceNode.buffer more than once is deprecated. A deprecation message is displayed if the buffer attribute is assigned more than once.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>