diff --git a/index.html b/index.html
index 1943511..12fbcfb 100644
--- a/index.html
+++ b/index.html
@@ -160,6 +160,8 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
+
+
@@ -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 = '▮▮'; playBtn.title = 'Pause';
}
function onPause(e) {
- if (e.target !== audio) return;
- playBtn.innerHTML = '▶'; playBtn.title = 'Play';
}
audioElA.addEventListener('loadedmetadata', onLoadedmetadata);
audioElB.addEventListener('loadedmetadata', onLoadedmetadata);
@@ -1502,13 +1502,21 @@ playBtn.addEventListener('click', () => {
playTrack(idx);
} else if (currentIndex < 0) {
playTrack(0);
- } else if (audio.paused) {
- audio.play().catch(() => {});
} else {
- audio.pause();
- if (isCrossfading) audioNext.pause();
+ 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);
function prevTrack() {