Added audio for melissa_k and ramon, did some cleaning up

ramonB1996 · Jan 13, 2024 · 43ed630 · 43ed630
1 parent 2aa4f99
commit 43ed630
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 36 deletions.
diff --git a/audio/melissa_k.mp3 b/audio/melissa_k.mp3
diff --git a/audio/ramon.mp3 b/audio/ramon.mp3
diff --git a/index.html b/index.html
@@ -34,28 +34,28 @@ <h2 id="countdown" class="secondary-color text-center"></h1>
         <h2 class="secondary-color">Dino's</h1>
         <div class="row g-2">
             <div class="col-lg-3 col-6 my-1">
-                <img class="img-fluid rounded" src="images/dino2.jpeg" onclick="duncan()"/>
+                <img class="img-fluid rounded" src="images/dino2.jpeg" onclick="playAudio('duncan.mp3')"/>
             </div>
             <div class="col-lg-3 col-6 my-1">
-                <img class="img-fluid rounded" src="images/dino8.jpeg" onclick="mikky()"/>
+                <img class="img-fluid rounded" src="images/dino8.jpeg" onclick="playAudio('mikky.mp3')"/>
             </div>
             <div class="col-lg-3 col-6 my-1">
-                <img class="img-fluid rounded" src="images/dino7.jpeg" onclick="wieteke()"/>
+                <img class="img-fluid rounded" src="images/dino7.jpeg" onclick="playVideo('wieteke.mp4')"/>
             </div>
             <div class="col-lg-3 col-6 my-1">
-                <img class="img-fluid rounded" src="images/dino1.jpeg"/>
+                <img class="img-fluid rounded" src="images/dino1.jpeg" onclick="playAudio('ramon.mp3')"/>
             </div>
             <div class="col-lg-3 col-6 my-1">
-                <img class="img-fluid rounded" src="images/dino3.jpeg" onclick="jitse()"/>
+                <img class="img-fluid rounded" src="images/dino3.jpeg" onclick="playVideo('jitse.mp4')"/>
             </div>
             <div class="col-lg-3 col-6 my-1">
-                <img class="img-fluid rounded" src="images/dino5.jpeg" onclick="melissa_m()"/>
+                <img class="img-fluid rounded" src="images/dino5.jpeg" onclick="playAudio('melissa_m.mp3')"/>
             </div>
             <div class="col-lg-3 col-6 my-1">
-                <img class="img-fluid rounded" src="images/dino6.jpeg"/>
+                <img class="img-fluid rounded" src="images/dino6.jpeg" onclick="playAudio('melissa_k.mp3')"/>
             </div>
             <div class="col-lg-3 col-6 my-1">
-                <img class="img-fluid rounded" src="images/dino4.jpeg" onclick="joris()"/>
+                <img class="img-fluid rounded" src="images/dino4.jpeg" onclick="playAudio('joris.mp3')"/>
             </div>
         </div>
 

diff --git a/scripts/easter-egg.js b/scripts/easter-egg.js
@@ -1,7 +1,5 @@
 var playing = false;
 
-var defaultAudio = 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3';
-
 function playAudio(src) {
     var audio = document.getElementById("audio");
 
@@ -10,7 +8,8 @@ function playAudio(src) {
         return;
     }
 
-    audio.src = src;
+    var audioPath = "audio/"+src;
+    audio.src = audioPath;
     audio.play();
     playing = true;
 
@@ -21,8 +20,10 @@ function playAudio(src) {
 
 function playVideo(src) {
     var video = document.getElementById("video");
+
+    var videoPath = "video/"+src;
     video.hidden = false;
-    video.src = src;
+    video.src = videoPath;
     video.play();
 
     video.onended = function() {
@@ -33,28 +34,4 @@ function playVideo(src) {
 function endAudioPlayback(audio) {
     audio.src = "";
     playing = false;
-}
-
-function mikky() {
-    playAudio('audio/mikky.mp3');
-}
-
-function jitse() {
-    playVideo('video/jitse.mp4');
-}
-
-function joris() {
-    playAudio('audio/joris.mp3');
-}
-
-function duncan() {
-    playAudio('audio/duncan.mp3');
-}
-
-function melissa_m() {
-    playAudio('audio/melissa_m.mp3');
-}
-
-function wieteke() {
-    playVideo('video/wieteke.mp4');
 }