From 42861dba9d1ad2124ca0f76c274bbc80b0a10e7a Mon Sep 17 00:00:00 2001
From: Armin <armin@cherry>
Date: Wed, 8 Jul 2026 17:04:43 +0200
Subject: [PATCH] feat: separate play/pause into individual buttons, add stop
 button

---
 index.html | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

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
         <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,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() {