update lieder

This commit is contained in:
Cay 2026-03-16 13:25:42 +00:00
parent 7a4a9b02b4
commit 7ad1b09739

View File

@ -49,9 +49,8 @@
border: 1px solid #c8960c; border: 1px solid #c8960c;
border-radius: 8px; border-radius: 8px;
padding: 6px 10px; padding: 6px 10px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); box-shadow: 0 2px 12px rgba(0,0,0,0.6);
} }
#music-mute-btn { #music-mute-btn {
background: none; background: none;
border: none; border: none;
@ -62,11 +61,7 @@
color: #f0d080; color: #f0d080;
transition: transform 0.15s; transition: transform 0.15s;
} }
#music-mute-btn:hover { transform: scale(1.2); }
#music-mute-btn:hover {
transform: scale(1.2);
}
#music-volume { #music-volume {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
@ -77,7 +72,6 @@
outline: none; outline: none;
cursor: pointer; cursor: pointer;
} }
#music-volume::-webkit-slider-thumb { #music-volume::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 12px; width: 12px;
@ -467,28 +461,20 @@
<!-- Music --> <!-- Music -->
<div id="music-control"> <div id="music-control">
<button id="music-mute-btn" title="Musik ein/ausschalten">🔊</button> <button id="music-mute-btn" title="Musik ein/ausschalten">🔊</button>
<input <input type="range" id="music-volume" min="0" max="1" step="0.01" value="0.4" title="Lautstärke" />
type="range"
id="music-volume"
min="0"
max="1"
step="0.01"
value="0.4"
title="Lautstärke"
/>
</div> </div>
<audio id="bg-music" loop preload="auto"></audio> <audio id="bg-music" preload="auto"></audio>
<script> <script>
(function () { (function () {
const playlist = [ const playlist = [
"/music/delosound-medieval-background-351307.mp3", // ← vollständigen Namen ergänzen "/music/delosound-mediev....mp3",
"/music/dueg-oth-musik-adel-142724.mp3", // ← vollständigen Namen ergänzen "/music/dueg-oth-musik-ad....mp3",
"/music/dueg-oth-musik-hintergrund-142725.mp3", // ← vollständigen Namen ergänzen "/music/dueg-oth-musik-hi....mp3",
"/music/eemmraan-fantasy-kingdom-261257.mp3", // ← vollständigen Namen ergänzen "/music/emmraan-fantasy-k....mp3",
"/music/jean-paul-v-dancing-in-the-medieval-time-329033.mp3", // ← vollständigen Namen ergänzen "/music/jean-paul-v-dancin....mp3",
"/music/jean-paul-v-danse-des-princesses-307890.mp3", // ← vollständigen Namen ergänzen "/music/jean-paul-v-danse-....mp3",
"/music/kaazoom-medieval-dance-2-min-edit-medieval-music-404925.mp3", // ← vollständigen Namen ergänzen "/music/kaazoom-medieval....mp3",
]; ];
const audio = document.getElementById("bg-music"); const audio = document.getElementById("bg-music");
@ -498,14 +484,20 @@
let muted = localStorage.getItem("dok_muted") === "true"; let muted = localStorage.getItem("dok_muted") === "true";
if (localStorage.getItem("dok_vol") !== null) if (localStorage.getItem("dok_vol") !== null)
vol.value = localStorage.getItem("dok_vol"); vol.value = localStorage.getItem("dok_vol");
audio.volume = parseFloat(vol.value); audio.volume = parseFloat(vol.value);
// Zufälliges Lied wählen // Playlist mischen und von vorne durchspielen
audio.src = playlist[Math.floor(Math.random() * playlist.length)]; let index = 0;
audio.addEventListener("ended", () => { const shuffled = [...playlist].sort(() => Math.random() - 0.5);
audio.src = playlist[Math.floor(Math.random() * playlist.length)];
function playTrack(i) {
audio.src = shuffled[i];
if (!muted) audio.play().catch(() => {}); if (!muted) audio.play().catch(() => {});
}
audio.addEventListener("ended", () => {
index = (index + 1) % shuffled.length;
playTrack(index);
}); });
function applyMute() { function applyMute() {
@ -515,29 +507,21 @@
localStorage.setItem("dok_muted", muted); localStorage.setItem("dok_muted", muted);
} }
muteBtn.addEventListener("click", () => { muteBtn.addEventListener("click", () => { muted = !muted; applyMute(); });
muted = !muted;
applyMute();
});
vol.addEventListener("input", () => { vol.addEventListener("input", () => {
audio.volume = parseFloat(vol.value); audio.volume = parseFloat(vol.value);
localStorage.setItem("dok_vol", vol.value); localStorage.setItem("dok_vol", vol.value);
if (parseFloat(vol.value) > 0 && muted) { if (parseFloat(vol.value) > 0 && muted) { muted = false; applyMute(); }
muted = false;
applyMute();
}
muteBtn.textContent = parseFloat(vol.value) === 0 ? "🔇" : "🔊"; muteBtn.textContent = parseFloat(vol.value) === 0 ? "🔇" : "🔊";
}); });
// Erster Start beim ersten Klick (Browser-Autoplay-Sperre)
playTrack(0);
applyMute(); applyMute();
document.addEventListener( document.addEventListener("click", () => {
"click", if (!muted && audio.paused) audio.play().catch(() => {});
() => { }, { once: true });
if (!muted) audio.play().catch(() => {});
},
{ once: true },
);
})(); })();
</script> </script>