audio/noiz
2
0
Fork 0
mirror of https://codeberg.org/armin/noiz.git synced 2026-09-01 05:50:52 +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

24
index.html
View file

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