CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3ISVIcpZuMFjZvjcviA7jTjHuODFTPbmswbBRzmnoTuZAi-vAFRKpUhfsBTqP-73xo0
cache-control: public, max-age=3600
expires: Tue, 14 Oct 2025 07:34:08 GMT
last-modified: Tue, 14 Oct 2025 01:05:59 GMT
etag: W/"37a7001a0c00f0878e448f894ed07e68"
x-goog-generation: 1760403959649602
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 151700
x-goog-meta-goog-reserved-file-mtime: 1760402412
x-goog-hash: crc32c=AopBfw==, md5=N6cAGgwA8IeORI+JTtB+aA==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 63997a96e3aed683d9f2a1462d0fc4ca
date: Tue, 14 Oct 2025 06:34:09 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
HTMLMediaElement: preservesPitch property - Web APIs | MDN
Toggle sidebar
>
HTMLMediaElement: preservesPitch property
Baseline
2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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.
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> |
Browser compatibility
Loading…