Revision 1098421 of AudioListener

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

<div>
<p>The <code>AudioListener</code> interface represents the position and orientation of the unique person listening to the audio scene, and is used in <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">audio spatialisation</a>. All {{domxref("PannerNode")}}s spatialise in relation to the <code>AudioListener</code> stored in the {{domxref("AudioContext.listener")}} attribute.</p>
</div>

<p>It is important to note that there is only one listener per context and that it isn't an {{domxref("AudioNode")}}.</p>

<p><img alt="We see the position, up and front vectors of an AudioListener, with the up and front vectors at 90° from the other" src="https://mdn.mozillademos.org/files/9715/WebAudioListener.png" style="display:block; height:250px; margin:0px auto; width:634px" /></p>

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

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

<div class="note">
<p><strong>Note:&nbsp;</strong>The following value are set and retrieved using different syntaxes. Retrieval is done by accessing, for example,&nbsp;<code>AudioListener.positionX</code>. While setting the same property is done with <code>AudioListener.positionX.value</code>. (This is why these values are not marked read only, which is how they appear in the specification's IDL.)</p>
</div>

<dl>
 <dt>{{domxref("AudioListener.positionX")}}</dt>
 <dd>Represents the horizontal position of the listener in a right-hand cartesian coordinate sytem.</dd>
 <dt>{{domxref("AudioListener.positionY")}}</dt>
 <dd>Represents the vertical position of the listener in a right-hand cartesian coordinate sytem.</dd>
 <dt>{{domxref("AudioListener.positionZ")}}</dt>
 <dd>Represents the longitudinal (back and forth) position of the listener in a right-hand cartesian coordinate sytem.</dd>
 <dt>{{domxref("AudioListener.forwardX")}}</dt>
 <dd>Represents the horizontal position of the listener's forward direction&nbsp;in the same cartesian coordinate sytem as the position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>)&nbsp;values. The forward and up values are linearly independent of each other. The default is 0.</dd>
 <dt>{{domxref("AudioListener.forwardY")}}</dt>
 <dd>Represents the vertical position of the listener's forward direction&nbsp;in the same cartesian coordinate sytem as the position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>)&nbsp;values. The forward and up values are linearly independent of each other. The default is 0.</dd>
 <dt>{{domxref("AudioListener.forwardZ")}}</dt>
 <dd>Represents the longitudinal (back and forth) position of the listener's forward direction&nbsp;in the same cartesian coordinate sytem as the position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>)&nbsp;values. The forward and up values are linearly independent of each other. The default is 0.</dd>
 <dt>{{domxref("AudioListener.upX")}}</dt>
 <dd>Represents the horizontal position of the top of the listener's head in the same cartesian coordinate sytem as the position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>)&nbsp;values. The forward and up values are linearly independent of each other. The default is 0.</dd>
 <dt>{{domxref("AudioListener.upY")}}</dt>
 <dd>Represents the vertical position of the top of the listener's head in the same cartesian coordinate sytem as the position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>)&nbsp;values. The forward and up values are linearly independent of each other. The default is 0.</dd>
 <dt>{{domxref("AudioListener.upZ")}}</dt>
 <dd>Represents the longitudinal (back and forth) position of the top of the listener's head in the same cartesian coordinate sytem as the position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>)&nbsp;values. The forward and up values are linearly independent of each other. The default is 0.</dd>
</dl>

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

<p><em>Inherits methods from its parent,&nbsp;</em>{{domxref('AudioNode')}}.</p>

<dl>
 <dt>{{domxref("AudioListener.setOrientation()")}}</dt>
 <dd>Defines the orientation of the listener.</dd>
</dl>

<h2 id="Deprecated_features">Deprecated features</h2>

<p>In a previous version of the specification, the three members listed below could be used to control the doppler effect applied to {{domxref("AudioBufferSourceNode")}}s connected downstream — these would be pitched up and down according to the relative speed of the {{domxref("PannerNode")}} and the {{domxref("AudioListener")}}. These features had a number of problems:</p>

<ul>
 <li>Only {{domxref("AudioBufferSourceNode")}}s were pitched up or down, not other source nodes.</li>
 <li>The behavior to adopt when an {{domxref("AudioBufferSourceNode")}} was connected to multiple {{domxref("PannerNode")}}s was unclear.</li>
 <li>Because the velocity of the panner and the listener were not {{domxref("AudioParam")}}s, the pitch modification could not be smoothly applied, resulting in audio glitches.</li>
</ul>

<dl>
 <dt>{{domxref("AudioListener.dopplerFactor")}}</dt>
 <dd>Is a double value representing the amount of pitch shift to use when rendering a <a href="https://en.wikipedia.org/wiki/Doppler_effect">doppler effect</a>.</dd>
 <dt>{{domxref("AudioListener.speedOfSound")}}</dt>
 <dd>Is a double value representing the speed of sound, in <em>meters per second</em>.</dd>
 <dt>{{domxref("AudioListener.setPosition()")}}</dt>
 <dd>Defines the position of the listener.</dd>
</dl>

<h2 id="Example">Example</h2>

<p>{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}}</p>

<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-audiolistener-interface', 'AudioListener')}}</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>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br />
    {{CompatVersionUnknown}} (unprefixed)</td>
   <td>{{CompatGeckoDesktop(25.0)}}&nbsp;</td>
   <td>{{CompatNo}}</td>
   <td>15.0{{property_prefix("webkit")}}<br />
    22 (unprefixed)</td>
   <td>6.0{{property_prefix("webkit")}}</td>
  </tr>
  <tr>
   <td>Position, forward, and up properties</td>
   <td>{{CompatChrome(52.0)}}</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>39</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}<br />
    {{CompatVersionUnknown}} (unprefixed)</td>
   <td>26.0</td>
   <td>1.2</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(33.0)}}<br />
    ​​​​​​​{{CompatVersionUnknown}} (unprefixed)</td>
  </tr>
  <tr>
   <td>Position, forward, and up properties</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(52.0)}}</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>39</td>
   <td>&nbsp;</td>
   <td>{{CompatChrome(52.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

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

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