style: replace play/pause emoji with SVG icons

index.html

@@ -342,7 +342,7 @@
           </div>
           <div id="waveform"></div>
           <div class="playback-controls">
-            <button class="play-btn" id="play-btn" title="Play / Pause">▶</button>
+            <button class="play-btn" id="play-btn" title="Play / Pause"><svg width="10" height="12" viewBox="0 0 10 12" fill="currentColor"><path d="M0 0l10 6-10 6z"/></svg></button>
             <span class="time-display" id="time-display">0:00 / 0:00</span>
             <button class="download-btn" id="download-btn">⬇ Download</button>
           </div>
@@ -414,9 +414,11 @@
       updateTime();
       if (!mainAudio.paused) requestAnimationFrame(updateMainProgress);
     }
-    mainAudio.addEventListener("play", () => { playBtn.textContent = "⏸"; requestAnimationFrame(updateMainProgress); });
-    mainAudio.addEventListener("pause", () => { playBtn.textContent = "▶"; });
-    mainAudio.addEventListener("ended", () => { playBtn.textContent = "▶"; waveformEl.querySelectorAll(".bar").forEach(b => b.style.background = ""); });
+    const playIcon = '<svg width="10" height="12" viewBox="0 0 10 12" fill="currentColor"><path d="M0 0l10 6-10 6z"/></svg>';
+    const pauseIcon = '<svg width="10" height="12" viewBox="0 0 10 12" fill="currentColor"><rect x="0" y="0" width="3" height="12"/><rect x="7" y="0" width="3" height="12"/></svg>';
+    mainAudio.addEventListener("play", () => { playBtn.innerHTML = pauseIcon; requestAnimationFrame(updateMainProgress); });
+    mainAudio.addEventListener("pause", () => { playBtn.innerHTML = playIcon; });
+    mainAudio.addEventListener("ended", () => { playBtn.innerHTML = playIcon; waveformEl.querySelectorAll(".bar").forEach(b => b.style.background = ""); });
     mainAudio.addEventListener("timeupdate", updateTime);
 
     playBtn.addEventListener("click", () => { stopFeedAudio(); mainAudio.paused ? mainAudio.play() : mainAudio.pause(); });
@@ -662,7 +664,7 @@
       if (playingCard) {
         playingCard.querySelectorAll(".mini-waveform .bar").forEach(b => b.style.background = "");
         playingCard.classList.remove("playing");
-        playingCard.querySelector(".song-play-btn").textContent = "▶";
+        playingCard.querySelector(".song-play-btn").innerHTML = '<svg width="8" height="10" viewBox="0 0 10 12" fill="currentColor"><path d="M0 0l10 6-10 6z"/></svg>';
         playingCard = null;
       }
     }
@@ -685,7 +687,7 @@
       feedAudio = new Audio(audioUrl);
       playingCard = card;
       card.classList.add("playing");
-      card.querySelector(".song-play-btn").textContent = "⏸";
+      card.querySelector(".song-play-btn").innerHTML = '<svg width="8" height="10" viewBox="0 0 10 12" fill="currentColor"><rect x="0" y="0" width="3" height="12"/><rect x="7" y="0" width="3" height="12"/></svg>';
       feedAudio.play();
       if (seekRatio != null) {
         feedAudio.addEventListener("loadedmetadata", () => {
@@ -710,11 +712,11 @@
       });
       feedAudio.addEventListener("error", () => stopFeedAudio());
       feedAudio.addEventListener("pause", () => {
-        if (playingCard === card) card.querySelector(".song-play-btn").textContent = "▶";
+        if (playingCard === card) card.querySelector(".song-play-btn").innerHTML = '<svg width="8" height="10" viewBox="0 0 10 12" fill="currentColor"><path d="M0 0l10 6-10 6z"/></svg>';
       });
       feedAudio.addEventListener("play", () => {
         if (playingCard === card) {
-          card.querySelector(".song-play-btn").textContent = "⏸";
+          card.querySelector(".song-play-btn").innerHTML = '<svg width="8" height="10" viewBox="0 0 10 12" fill="currentColor"><rect x="0" y="0" width="3" height="12"/><rect x="7" y="0" width="3" height="12"/></svg>';
           requestAnimationFrame(updateProgress);
         }
       });
@@ -746,7 +748,7 @@
             : '';
           card.innerHTML = `
             <div class="song-card-top">
-              <button class="song-play-btn">▶</button>
+              <button class="song-play-btn"><svg width="8" height="10" viewBox="0 0 10 12" fill="currentColor"><path d="M0 0l10 6-10 6z"/></svg></button>
               ${thumbHtml}
               <div class="song-title">${esc(song.title || "Untitled")}</div>
               <div class="song-tags">${esc(song.tags || "")}</div>