make preservesPitch example functional (#27509)

* make example functional

* Update index.md

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

files/en-us/web/api/htmlmediaelement/preservespitch/index.md

@@ -46,23 +46,12 @@ div {
 
 ```js
 const audio = document.querySelector("audio");
-// When the audio starts playing...
-audio.addEventListener(
-  "play",
-  () => {
-    // Handle page visibility change:
-    // - If the page is hidden, pause the video
-    // - If the page is shown, play the video
-    document.addEventListener("visibilitychange", () => {
-      if (document.hidden) {
-        audio.pause();
-      } else {
-        audio.play();
-      }
-    });
-  },
-  { once: true }
-);
+document.getElementById("rate").addEventListener("change", (e) => {
+  audio.playbackRate = e.target.value;
+});
+document.getElementById("pitch").addEventListener("change", (e) => {
+  audio.preservesPitch = e.target.checked;
+});
 ```
 
 {{EmbedLiveSample("Setting the preservesPitch property")}}