diff --git a/files/en-us/web/api/htmlmediaelement/index.md b/files/en-us/web/api/htmlmediaelement/index.md index 1775d2e2d3374ee..b71762fdd84c2cf 100644 --- a/files/en-us/web/api/htmlmediaelement/index.md +++ b/files/en-us/web/api/htmlmediaelement/index.md @@ -76,7 +76,7 @@ _This interface also inherits properties from its ancestors {{domxref("HTMLEleme - {{domxref("HTMLMediaElement.preload")}} - : Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("preload", "video")}} HTML attribute, indicating what data should be preloaded, if any. Possible values are: `none`, `metadata`, `auto`. - {{domxref("HTMLMediaElement.preservesPitch")}} - - : Is a {{jsxref('Boolean')}} that determines if the pitch of the sound will be preserved. If set to `false`, the pitch will adjust to the speed of the audio. This is implemented with prefixes in Firefox (`mozPreservesPitch`) and WebKit (`webkitPreservesPitch`). + - : Is a boolean value that determines if the pitch of the sound will be preserved. If set to `false`, the pitch will adjust to the speed of the audio. - {{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}} - : Returns a `unsigned short` (enumeration) indicating the readiness state of the media. - {{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}} diff --git a/files/en-us/web/api/htmlmediaelement/playbackrate/index.md b/files/en-us/web/api/htmlmediaelement/playbackrate/index.md index bd66b606c8642be..437bd3b55f64801 100644 --- a/files/en-us/web/api/htmlmediaelement/playbackrate/index.md +++ b/files/en-us/web/api/htmlmediaelement/playbackrate/index.md @@ -16,7 +16,7 @@ If `playbackRate` is negative, the media is **not** played backwards. The audio is muted when the fast forward or slow motion is outside a useful range (for example, Gecko mutes the sound outside the range `0.25` to `4.0`). -The pitch of the audio is corrected by default and is the same for every speed. Some browsers implement the non-standard {{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}} property to control this. +The pitch of the audio is corrected by default. You can disable pitch correction using the {{domxref("HTMLMediaElement.preservesPitch")}} property. ## Syntax diff --git a/files/en-us/web/api/htmlmediaelement/preservespitch/index.md b/files/en-us/web/api/htmlmediaelement/preservespitch/index.md new file mode 100644 index 000000000000000..fa1d72000a0213f --- /dev/null +++ b/files/en-us/web/api/htmlmediaelement/preservespitch/index.md @@ -0,0 +1,73 @@ +--- +title: HTMLMediaElement.preservesPitch +slug: Web/API/HTMLMediaElement/preservesPitch +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property +browser-compat: api.HTMLMediaElement.preservesPitch +--- +{{APIRef("HTML DOM")}} + +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 {{domxref("HTMLMediaElement.playbackRate")}}. + +## Value + +A boolean value defaulting to `true`. + +## Examples + +### Setting the preservesPitch property + +In this example, we have an {{HTMLElement("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 + + +
+ + +
+ +
+ + +
+``` + +```css hidden +div { + margin: .5rem 0; +} +``` + +```js +const audio = document.querySelector("audio"); + +const rate = document.querySelector('#rate'); +rate.addEventListener('input', () => audio.playbackRate = rate.value ); + +const pitch = document.querySelector('#pitch'); +pitch.addEventListener('change', () => { + audio.mozPreservesPitch = pitch.checked; + audio.preservesPitch = pitch.checked; +}); +``` + +{{EmbedLiveSample("Setting the preservesPitch property")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLMediaElement.playbackRate")}} +- [Web Audio playbackRate explained](/en-US/docs/Web/Guide/Audio_and_video_delivery/WebAudio_playbackRate_explained)