1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
# Music Autoplay on Startup
## Summary
On page load, immediately attempt `bgm.play()`. If the browser blocks it (autoplay policy), install a one-time `click` listener on `document` that starts the music on the user's first interaction anywhere on the page. The toggle button state (`musicOn`, button icon, label, background) is updated to reflect playing status in both code paths.
## Change
Single location: the music toggle block in `index.html` (~line 737), just after `bgm.volume = 0.2` is set and the toggle button is wired up.
```js
// attempt immediate autoplay; fall back to first-interaction start
const track = MUSIC[Aero.getTheme()] || MUSIC.aero;
bgm.src = track.src;
bgm.load();
bgm.play().then(() => {
musicOn = true;
mtBtn.textContent = '❚❚';
mtLabel.textContent = track.label;
mtBtn.style.background = 'radial-gradient(circle at 30% 25%,white,oklch(75% 0.14 55) 60%,oklch(55% 0.15 35))';
}).catch(() => {
// autoplay blocked — start on first user gesture
document.addEventListener('click', function startOnGesture() {
document.removeEventListener('click', startOnGesture);
bgm.play().then(() => {
musicOn = true;
mtBtn.textContent = '❚❚';
mtLabel.textContent = (MUSIC[Aero.getTheme()] || MUSIC.aero).label;
mtBtn.style.background = 'radial-gradient(circle at 30% 25%,white,oklch(75% 0.14 55) 60%,oklch(55% 0.15 35))';
});
}, { once: true });
});
```
## Error handling
- If `bgm.play()` fails in both paths (e.g., no audio file), it fails silently — no UI disruption.
- The manual toggle button continues to work normally regardless of autoplay outcome.
|
