files/en-us/web/api/htmlmediaelement/preservespitch/index.md
{{APIRef("HTML DOM")}}
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 {{domxref("HTMLMediaElement.playbackRate")}}.
A boolean value defaulting to true.
In this example, we have an {{HTMLElement("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="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>
<div>
<label for="rate">Adjust playback rate:</label>
<input id="rate" type="range" min="0.25" max="3" step="0.05" value="1" />
</div>
<div>
<label for="pitch">Preserve pitch:</label>
<input type="checkbox" id="pitch" 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;
});
{{EmbedLiveSample("Setting the preservesPitch property")}}
{{Specifications}}
{{Compat}}