The HTMLMediaElement.preservesPitch property determines whether or not the browser should adjust the pitch of the audio to compensate for changes to the playback rate made by setting HTMLMediaElement.playbackRate.


A boolean value defaulting to true.


Setting the preservesPitch property

In this example, we have an <audio> element, a range control that adjusts the playback rate, and a checkbox that sets preservesPitch.

Try playing the audio, then adjusting the playback rate, then enabling and disabling the checkbox.

<audio controls src=""></audio>

  <label for="rate">Adjust playback rate:</label>
  <input id="rate" type="range" min="0.25" max="3" step="0.05" value="1">

  <label for="pitch">Preserve pitch:</label>
  <input type="checkbox" id="pitch" name="pitch" checked>
const audio = document.querySelector("audio");

const rate = document.querySelector('#rate');
rate.addEventListener('input', () => audio.playbackRate = rate.value );

const pitch = document.querySelector('#pitch');
pitch.addEventListener('change', () => {
  if ('preservesPitch' in audio) {
    audio.preservesPitch = pitch.checked;
  else if ('mozPreservesPitch' in audio) { //deprecated
    audio.mozPreservesPitch = pitch.checked;


HTML Standard
# dom-media-preservespitch-dev

Browser compatibility

BCD tables only load in the browser

See also