Widget:AudioPlayer2: Difference between revisions

VisualWikitext

Revision as of 09:38, 13 June 2023

Sample result

Press the button to play/pause

Adjust volume with slider

@@ Line 7: / Line 7: @@
 <includeonly>
 <html>
-<script>
-let state = false;
-let btn = document.querySelector(".btn");
-let record = document.querySelector(".record");
-let toneArm = document.querySelector(".tone-arm");
-let song = document.querySelector(".my-song");
-let slider = document.querySelector(".slider");
-btn.addEventListener("click", () => {
-  if (state == false) {
-    record.classList.add("on");
-    toneArm.classList.add("play");
-    setTimeout(() => {
-      song.play();
-    }, 1000);
-  } else {
-    record.classList.remove("on");
-    toneArm.classList.remove("play");
-    song.pause();
-  }
-  state = !state;
-});
-slider.addEventListener("input", (e) => {
-  song.volume = Number(e.target.value);
-});
-</script>
 <style>
 .player {
@@ Line 193: / Line 165: @@
      <audio loop class="my-song" src="<!--{$mp3|escape:'urlpathinfo'}-->" preload="auto"></audio>
    </div>
+<script>
+let state = false;
+let btn = document.querySelector(".btn");
+let record = document.querySelector(".record");
+let toneArm = document.querySelector(".tone-arm");
+let song = document.querySelector(".my-song");
+let slider = document.querySelector(".slider");
+btn.addEventListener("click", () => {
+  if (state == false) {
+    record.classList.add("on");
+    toneArm.classList.add("play");
+    setTimeout(() => {
+      song.play();
+    }, 1000);
+  } else {
+    record.classList.remove("on");
+    toneArm.classList.remove("play");
+    song.pause();
+  }
+  state = !state;
+});
+slider.addEventListener("input", (e) => {
+  song.volume = Number(e.target.value);
+});
+</script>
 </html>
 </includeonly>