added sound effects

2024-03-26 12:38:18 +01:00 · 2024-03-26 12:38:18 +01:00 · d071dad97a
commit d071dad97a
parent d8b7bf27bf
10 changed files with 27 additions and 0 deletions
--- a/src/assets/effects/click_1.wav
+++ b/src/assets/effects/click_1.wav
--- a/src/assets/effects/hover_1.wav
+++ b/src/assets/effects/hover_1.wav
--- a/src/assets/effects/hover_2.wav
+++ b/src/assets/effects/hover_2.wav
--- a/src/assets/effects/hover_3.wav
+++ b/src/assets/effects/hover_3.wav
--- a/src/assets/effects/hover_4.wav
+++ b/src/assets/effects/hover_4.wav
--- a/src/assets/effects/hover_5.wav
+++ b/src/assets/effects/hover_5.wav
--- a/src/assets/effects/hover_6.wav
+++ b/src/assets/effects/hover_6.wav
--- a/src/assets/sound.js
+++ b/src/assets/sound.js
@ -0,0 +1,25 @@
+function load_effects(names) {
+    return names.map(name => {
+        let audio = document.createElement("audio");
+        audio.src = `/assets/effects/${name}.wav`;
+        audio.volume = 0.1;
+        return audio;
+    });
+}
+
+function play_random(effects) {
+    let index = Math.floor(Math.random() * effects.length);
+    effects[index].pause();
+    effects[index].play().catch(() => { });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    let click_effects = load_effects(["click_1"]);
+    let hover_effects = load_effects(["hover_1", "hover_2", "hover_3", "hover_4", "hover_5", "hover_6"]);
+    let links = [...document.getElementsByTagName("a")];
+    links.forEach(link => {
+        link.addEventListener("mouseover", () => play_random(hover_effects));
+        link.addEventListener("mousedown", () => play_random(click_effects));
+    });
+})
+
--- a/src/en/index.html
+++ b/src/en/index.html
@ -8,6 +8,7 @@
    <meta name="description" content="Home page of Frederik Palmø (vodofrede)" />
    <link rel="stylesheet" href="/assets/main.css" />
    <link rel="icon" type="image/x-icon " href="/assets/favicon.ico" />
+    <script src="/assets/sound.js"></script>
 </head>

 <body class="column separate" style="padding: 2%; gap: 15px">
--- a/src/index.html
+++ b/src/index.html
@ -8,6 +8,7 @@
    <meta name="description" content="Home page of Frederik Palmø (vodofrede)" />
    <link rel="stylesheet" href="/assets/main.css" />
    <link rel="icon" type="image/x-icon " href="/assets/favicon.ico" />
+    <script src="/assets/sound.js"></script>
 </head>

 <body class="column separate" style="padding: 2%; gap: 15px">