audio/noiz
2
0
Fork 0
mirror of https://codeberg.org/armin/noiz.git synced 2026-09-01 14:00:54 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: separate play/pause into individual buttons, add stop button

Browse source
This commit is contained in:
Armin 2026-07-08 17:04:43 +02:00
commit 42861dba9d
1 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

22
index.html
View file

@ -160,6 +160,8 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
<div class="controls">
<button id="prevBtn" title="Previous">&#9664;&#9664;</button>
<button class="play-btn" id="playBtn" title="Play">&#9654;</button>
<button id="pauseBtn" title="Pause">&#9646;&#9646;</button>
<button id="stopBtn" title="Stop">&#9632;</button>
<button id="nextBtn" title="Next">&#9654;&#9654;</button>
</div>
<div class="volume-row">
@ -681,6 +683,8 @@ const trackArtist = document.getElementById('trackArtist');
const playBtn = document.getElementById('playBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');
const waveformCanvas = document.getElementById('waveform');
const waveformWrap = document.getElementById('waveformWrap');
const timeCurrent = document.getElementById('timeCurrent');
@ -1471,12 +1475,8 @@ function onEnded(e) {
}
}
function onPlay(e) {
if (e.target !== audio) return;
playBtn.innerHTML = '&#9646;&#9646;'; playBtn.title = 'Pause';
}
function onPause(e) {
if (e.target !== audio) return;
playBtn.innerHTML = '&#9654;'; playBtn.title = 'Play';
}
audioElA.addEventListener('loadedmetadata', onLoadedmetadata);
audioElB.addEventListener('loadedmetadata', onLoadedmetadata);
@ -1502,12 +1502,20 @@ playBtn.addEventListener('click', () => {
playTrack(idx);
} else if (currentIndex < 0) {
playTrack(0);
} else if (audio.paused) {
audio.play().catch(() => {});
} else {
audio.play().catch(() => {});
}
});
pauseBtn.addEventListener('click', () => {
if (currentIndex < 0) return;
audio.pause();
if (isCrossfading) audioNext.pause();
}
});
stopBtn.addEventListener('click', () => {
if (currentIndex < 0) return;
audio.pause();
if (isCrossfading) audioNext.pause();
audio.currentTime = 0;
});
prevBtn.addEventListener('click', prevTrack);
nextBtn.addEventListener('click', nextTrack);