preservesPitch
The preservesPitch property for <audio> or <video> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The preservesPitch property for <audio> or <video> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 86 | 86 | 101 | 17.2 | 86 | 17.2 | |
- Available with a vendor prefix: webkit (4)
- Available with a vendor prefix: webkit (3.2)
Syntax
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.
Feature explanation
Summarize how pitch preservation affects sped-up speech and voice recordings.
Playback settings table
Pair speed presets with notes about typical listening scenarios.
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.
Related links
Powered by web-features