fix(review): add interactive play and pause audio example (#65337)

curriculum/challenges/english/blocks/review-javascript-audio-and-video/6723cf27c6e9a0c3f3041385.md

@@ -5,28 +5,58 @@ challengeType: 31
 dashedName: review-javascript-audio-and-video
 ---
 
-# --description--
+# --interactive--
 
 ## `Audio` Constructor and Common Methods
 
 - **Definition**: The `Audio` constructor, like other constructors, is a special function called with the `new` keyword. It returns an `HTMLAudioElement`, which you can then use to play audio for the user or append to the DOM for the user to control themselves. When you call the constructor, you can optionally pass a URL as the (only) argument. This URL should point to the source of the audio file you want to play. Or, if you need to change the source dynamically, you can assign the URL to the `src` property of the returned audio element.
 - **`play()` Method**: This method is used with the `audio` or `video` elements to begin playback for the media.
 
-```js
-const audio = document.getElementById('audio');
+:::interactive_editor
 
-// Starts playing the audio
-audio.play();
-```
+```html
+<audio id="audio" controls>
+  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
+</audio>
+
+<button id="playBtn">Play Audio</button>
+
+<script>
+  const audio = document.getElementById("audio");
+  const playBtn = document.getElementById("playBtn");
+
+  playBtn.addEventListener("click", () => {
+    audio.play();
+  });
+</script>
+
+:::
 
 - **`pause()` Method**: This method is used with the `audio` or `video` elements to pause playback for the media. It maintains the current position, so if `play()` is called, it starts from that position.
 
-```js
-function pauseAudio() {
-  const audio = document.getElementById('myAudio');
-  audio.pause();  // Pauses the audio playback
-}
-```
+:::interactive_editor
+
+```html
+<audio id="myAudio" controls>
+  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
+</audio>
+
+<br>
+
+<button id="pauseBtn">Pause Audio</button>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const audio = document.getElementById("myAudio");
+    const pauseBtn = document.getElementById("pauseBtn");
+
+    pauseBtn.addEventListener("click", () => {
+      audio.pause();
+    });
+  });
+</script>
+
+:::
 
 - **`addTextTrack()` Method**: This method allows you to specify a text track to associate with the media element - which is especially helpful for adding subtitles to a video.
 - **`fastSeek()` Method**: This method allows you to move the playback position to a specific time within the media.