HTMLMediaElement: preservesPitch property

Baseline 2023

Newly available

Since ⁨December 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

TheHTMLMediaElement.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 settingHTMLMediaElement.playbackRate.

Value

A boolean value defaulting totrue.

Examples

Setting the preservesPitch property

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

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

html

<audio  controls  src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio><div>  <label for="rate">Adjust playback rate:</label>  <input type="range" min="0.25" max="3" step="0.05" value="1" /></div><div>  <label for="pitch">Preserve pitch:</label>  <input type="checkbox" name="pitch" checked /></div>

div {  margin: 0.5rem 0;}

const audio = document.querySelector("audio");document.getElementById("rate").addEventListener("change", (e) => {  audio.playbackRate = e.target.value;});document.getElementById("pitch").addEventListener("change", (e) => {  audio.preservesPitch = e.target.checked;});