adding a variation of Click Play Audio

eracom · Oct 3, 2024 · 9f99f06 · 9f99f06
1 parent 61c85c9
commit 9f99f06
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 1 deletion.
diff --git a/click-play-audio-2.html b/click-play-audio-2.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Play Audio with JS</title>
+    <style>
+
+        /* rend invisible les fichiers vidéo / audio servant de source sonore */
+        div[data-id="videoMP4"],
+        div[data-id="audioMP3"] {
+           display: none;
+        }
+
+        button {
+            margin : 1rem;
+            font-size: 2rem;
+        }
+    </style>
+</head>
+
+<body>
+    <div data-id="trigger1">
+        <button>play mp4</button>
+    </div>
+    <div data-id="trigger2">
+        <button>play mp3</button>
+    </div>
+
+    <div data-id="videoMP4">
+        <video>
+            <source src="media/short-audio-loop.mp4">
+        </video>
+    </div>
+
+    <div data-id="audioMP3">
+        <audio src="media/short-audio-loop.mp3"></audio>
+    </div>
+
+</body>
+<script>
+    document.addEventListener( "DOMContentLoaded", function () {
+
+        // les boutons qui déclenchent le son
+        // bouton 1
+        var trigger1 = document.querySelector( '[data-id="trigger1"]' );
+        // bouton 2
+        var trigger2 = document.querySelector( '[data-id="trigger2"]' );
+
+        // lien avec la source sonore
+        // source sonore 1
+        trigger1.addEventListener("click", 
+            playsound.bind( trigger1, "[data-id='videoMP4'] video" )
+        );
+        // source sonore 2
+        trigger2.addEventListener("click", 
+            playsound.bind( trigger1, "[data-id='audioMP3'] audio" )
+        );
+
+        function playsound( mediaID ) {
+            document.querySelector( mediaID ).play();
+        }
+
+    });
+</script>
+
+</html>
diff --git a/click-play-audio.html b/click-play-audio.html
@@ -16,7 +16,7 @@
     <button class="playbutton" data-audio="audio1">play/pause</button>
     <audio id="audio1" class="audio" controls src="media/short-audio-loop.mp3"></audio>
 
-    <br>
+    <hr/>
 
     <button class="playbutton" data-audio="audio2">play/pause</button>
     <audio id="audio2" class="audio" controls src="media/short-audio-loop.mp3"></audio>

diff --git a/gradient-corners.html b/gradient-corners.html
diff --git a/media/short-audio-loop.mp4 b/media/short-audio-loop.mp4
diff --git a/sliders.html b/sliders.html