HTMLMediaElement: preservesPitch property
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
.
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.
<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>
const audio = document.querySelector("audio");
// When the audio starts playing...
audio.addEventListener(
"play",
() => {
// Handle page visibility change:
// - If the page is hidden, pause the video
// - If the page is shown, play the video
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
audio.pause();
} else {
audio.play();
}
});
},
{ once: true }
);
Specifications
Specification |
---|
HTML Standard # dom-media-preservespitch-dev |
Browser compatibility
BCD tables only load in the browser