HTMLMediaElement: preservesPitch property - Web APIs | MDN
Value
A boolean value defaulting to true.
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 sets preservesPitch.
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 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;
}
js
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;
});
Specifications
| Specification |
|---|
| HTML # dom-media-preservespitch-dev |