update lieder
This commit is contained in:
parent
7a4a9b02b4
commit
7ad1b09739
@ -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>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user