Add a page for HTMLMediaElement.preservesPitch (#14183)

* Add a page for HTMLMediaElement.preservesPitch * Fix slug capitalization * Better headings * Remove an extra space * Adjust see also * Update files/en-us/web/api/htmlmediaelement/index.md argh, copy/paste Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/api/htmlmediaelement/preservespitch/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/api/htmlmediaelement/preservespitch/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Remove extraneous empty line Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
mdn · Mar 23, 2022 · f31cca6 · f31cca6
1 parent 230eb0b
commit f31cca6
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
+<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>
+```
+
+```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)