admin/34919-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.6 Music on by default

Browse Source
This commit is contained in:
Flatlogic Bot 2025-10-13 11:26:20 +00:00
parent 08fe9491a0
commit 7549076d0f
3 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/css/style.css
View File

@ -194,11 +194,19 @@ body {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
padding: 10px 15px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer; cursor: pointer;
z-index: 1000; z-index: 1000;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#music-toggle svg {
width: 32px;
height: 32px;
stroke: white;
} }

20
assets/js/main.js
View File

@ -2,15 +2,31 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const music = document.getElementById('background-music'); const music = document.getElementById('background-music');
const musicToggle = document.getElementById('music-toggle'); const musicToggle = document.getElementById('music-toggle');
const soundOnIcon = document.getElementById('sound-on-icon');
const soundOffIcon = document.getElementById('sound-off-icon');
if (music && musicToggle) { if (music && musicToggle) {
// Try to play music by default
music.play().then(() => {
// Autoplay started!
soundOnIcon.style.display = 'inline';
soundOffIcon.style.display = 'none';
}).catch(error => {
// Autoplay was prevented.
console.log("Autoplay was prevented by the browser.");
soundOnIcon.style.display = 'none';
soundOffIcon.style.display = 'inline';
});
musicToggle.addEventListener('click', function() { musicToggle.addEventListener('click', function() {
if (music.paused) { if (music.paused) {
music.play(); music.play();
musicToggle.textContent = 'Pause Music'; soundOnIcon.style.display = 'inline';
soundOffIcon.style.display = 'none';
} else { } else {
music.pause(); music.pause();
musicToggle.textContent = 'Play Music'; soundOnIcon.style.display = 'none';
soundOffIcon.style.display = 'inline';
} }
}); });
} }

13
index.php
View File

@ -33,7 +33,18 @@
</head> </head>
<body> <body>
<audio id="background-music" src="https://www.bensound.com/bensound-music/bensound-rainyday.mp3" loop></audio> <audio id="background-music" src="https://www.bensound.com/bensound-music/bensound-rainyday.mp3" loop></audio>
<button id="music-toggle">Play Music</button> <div id="music-toggle">
<svg id="sound-on-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
</svg>
<svg id="sound-off-icon" style="display:none;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-x">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
<line x1="23" y1="9" x2="17" y2="15"></line>
<line x1="17" y1="9" x2="23" y2="15"></line>
</svg>
</div>
<header class="main-header"> <header class="main-header">
<div class="container"> <div class="container">