spetznas
66 lines
1.3 KiB
HTML
Executable File
66 lines
1.3 KiB
HTML
Executable File
<style>
|
|
.music-fab {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.fab-button {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: white;
|
|
box-shadow: 0 6px 18px rgba(0,0,0,0.2);
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.fab-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
</style>
|
|
|
|
<div class="music-fab">
|
|
<button id="music-btn" class="fab-button">⏸️</button>
|
|
</div>
|
|
|
|
<audio id="bg-music" autoplay loop>
|
|
<source src="/audio/canon-in-d.mp3" type="audio/mpeg">
|
|
</audio>
|
|
|
|
<script>
|
|
const btn = document.getElementById("music-btn");
|
|
const audio = document.getElementById("bg-music");
|
|
|
|
audio.volume = 0.3;
|
|
|
|
// Initial state: assume autoplay started
|
|
let isPlaying = true;
|
|
btn.textContent = "⏸️"; // pause icon
|
|
|
|
// Handle autoplay blocked by some browsers
|
|
audio.play().catch(() => {
|
|
isPlaying = false;
|
|
btn.textContent = "▶️"; // play icon
|
|
});
|
|
|
|
btn.addEventListener("click", async () => {
|
|
if (!isPlaying) {
|
|
try {
|
|
await audio.play();
|
|
isPlaying = true;
|
|
btn.textContent = "⏸️"; // pause icon
|
|
} catch (e) {
|
|
console.log("Playback blocked:", e);
|
|
}
|
|
} else {
|
|
audio.pause();
|
|
isPlaying = false;
|
|
btn.textContent = "▶️"; // play icon
|
|
}
|
|
});
|
|
</script>
|