preservesPitch
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 86 | 86 | 101 | 17.2 | 86 | 17.2 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: webkit (4)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: webkit (3.2)
Syntax
JAVASCRIPT
const video = document.querySelector('video');
video.playbackRate = 2.0;
video.preservesPitch = true; // Maintain pitch even at double speed
// Set to false to change the pitch according to the playback speedLive demo
Speech speed control
Toggle preservesPitch while changing playbackRate on a spoken-audio sample.
PreviewFullscreen
Feature explanation
Summarize how pitch preservation affects sped-up speech and voice recordings.
PreviewFullscreen
Playback settings table
Pair speed presets with notes about typical listening scenarios.
PreviewFullscreen
Use cases
-
Enhance media playback
Use preservesPitch when audio, video, or responsive media needs better control or more capable browser behavior.
-
Deliver flexible assets
Apply preservesPitch to adapt media loading or presentation more closely to user context and device capability.
Cautions
- Test preservesPitch in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Pair richer media behavior with captions, transcripts, controls, and loading behavior that remain understandable to all users.