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