---
title: BaseAudioContext
slug: Web/API/BaseAudioContext
tags:
  - API
  - Audio
  - BaseAudioContext
  - Interface
  - NeedsTranslation
  - Reference
  - TopicStub
  - Web Audio API
translation_of: Web/API/BaseAudioContext
---
<div>{{APIRef("Web Audio API")}}</div>

<p class="summary"><span class="seoSummary">The <code>BaseAudioContext</code> interface acts as a base definition for online and offline audio-processing graphs, as represented by {{domxref("AudioContext")}} and {{domxref("OfflineAudioContext")}} respectively.</span> You wouldn't use <code>BaseAudioContext</code> directly — you'd use its features via one of these two inheriting interfaces.</p>

<p>A <code>BaseAudioContext</code> can be a target of events, therefore it implements the {{domxref("EventTarget")}} interface.</p>

<p>{{InheritanceDiagram}}</p>

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

<dl>
 <dt>{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}</dt>
 <dd>Returns the {{domxref("AudioWorklet")}} object, used for creating custom AudioNodes with JavaScript processing.</dd>
 <dt>{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}</dt>
 <dd>Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at <code>0</code>.</dd>
 <dt>{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}</dt>
 <dd>Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.</dd>
 <dt>{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}</dt>
 <dd>Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.</dd>
 <dt>{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}</dt>
 <dd>Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.</dd>
 <dt>{{domxref("BaseAudioContext.state")}} {{readonlyInline}}</dt>
 <dd>Returns the current state of the <code>AudioContext</code>.</dd>
</dl>

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

<dl>
 <dt>{{domxref("BaseAudioContext.onstatechange")}}</dt>
 <dd>An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the <code>AudioContext</code>'s state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).</dd>
</dl>

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

<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p>

<dl>
 <dt>{{domxref("BaseAudioContext.createBuffer()")}}</dt>
 <dd>Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.</dd>
 <dt>{{domxref("BaseAudioContext.createConstantSource()")}}</dt>
 <dd>Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.</dd>
 <dt>{{domxref("BaseAudioContext.createBufferSource()")}}</dt>
 <dd>Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.</dd>
 <dt>{{domxref("BaseAudioContext.createScriptProcessor()")}}</dt>
 <dd>Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.</dd>
 <dt>{{domxref("BaseAudioContext.createStereoPanner()")}}</dt>
 <dd>Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.</dd>
 <dt>{{domxref("BaseAudioContext.createAnalyser()")}}</dt>
 <dd>Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.</dd>
 <dt>{{domxref("BaseAudioContext.createBiquadFilter()")}}</dt>
 <dd>Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.</dd>
 <dt>{{domxref("BaseAudioContext.createChannelMerger()")}}</dt>
 <dd>Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.</dd>
 <dt>{{domxref("BaseAudioContext.createChannelSplitter()")}}</dt>
 <dd>Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.</dd>
 <dt>{{domxref("BaseAudioContext.createConvolver()")}}</dt>
 <dd>Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.</dd>
 <dt>{{domxref("BaseAudioContext.createDelay()")}}</dt>
 <dd>Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.</dd>
 <dt>{{domxref("BaseAudioContext.createDynamicsCompressor()")}}</dt>
 <dd>Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.</dd>
 <dt>{{domxref("BaseAudioContext.createGain()")}}</dt>
 <dd>Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.</dd>
 <dt>{{domxref("BaseAudioContext.createIIRFilter()")}}</dt>
 <dd>Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.</dd>
 <dt>{{domxref("BaseAudioContext.createOscillator()")}}</dt>
 <dd>Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.</dd>
 <dt>{{domxref("BaseAudioContext.createPanner()")}}</dt>
 <dd>Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.</dd>
 <dt>{{domxref("BaseAudioContext.createPeriodicWave()")}}</dt>
 <dd>Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.</dd>
 <dt>{{domxref("BaseAudioContext.createWaveShaper()")}}</dt>
 <dd>Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.</dd>
 <dt>{{domxref("BaseAudioContext.decodeAudioData()")}}</dt>
 <dd>Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. This method only works on complete files, not fragments of audio files.</dd>
 <dt>{{domxref("BaseAudioContext.resume()")}}</dt>
 <dd>Resumes the progression of time in an audio context that has previously been suspended/paused.</dd>
</dl>

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

<p>Basic audio context declaration:</p>

<pre class="brush: js">var audioCtx = new AudioContext();</pre>

<p>Cross browser variant:</p>

<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();

var oscillatorNode = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
var finish = audioCtx.destination;
// etc.</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', '#BaseAudioContext', 'BaseAudioContext')}}</td>
   <td>{{Spec2('Web Audio API')}}</td>
   <td> </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>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>15.0{{property_prefix("webkit")}}<br>
    22</td>
   <td>6.0{{property_prefix("webkit")}}</td>
  </tr>
  <tr>
   <td><code>baseLatency</code></td>
   <td>{{CompatChrome(60)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>createConstantSource()</code></td>
   <td>{{CompatChrome(56)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(52)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera(43)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>createStereoPanner()</code></td>
   <td>{{CompatChrome(42)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(37.0)}} </td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(40.0)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatSafari(8.0)}}</td>
  </tr>
  <tr>
   <td>Unprefixed</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>2.2</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>baseLatency</code></td>
   <td>{{CompatChrome(60)}}</td>
   <td>{{CompatChrome(60)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>createConstantSource()</code></td>
   <td>{{CompatChrome(56)}}</td>
   <td>{{CompatChrome(56)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile(52)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>createStereoPanner()</code></td>
   <td>{{CompatChrome(42)}}</td>
   <td>{{CompatChrome(42)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Unprefixed</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOperaMobile(43)}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul style="margin-left: 40px;">
 <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
 <li>{{domxref("AudioContext")}}</li>
 <li>{{domxref("OfflineAudioContext")}}</li>
</ul>