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">