Add gapless and crossfade playlist transitions with a mode toggle, and a waveform seek bar for audio-only playback

This commit is contained in:
Jonathan Sykes
2026-09-19 16:12:33 +08:00
parent 71fc51fb50
commit ca07e1fdf1
5 changed files with 485 additions and 4 deletions

View File

@@ -141,6 +141,9 @@
<div class="seek-row">
<span id="curTime" class="time">0:00</span>
<div class="seek-wrap">
<!-- Audio-only: loudness waveform drawn behind the transparent range input -->
<canvas id="waveCanvas" class="wave-canvas" aria-hidden="true"></canvas>
<span id="waveTip" class="wave-tip hidden"></span>
<input id="seek" class="seek" type="range" min="0" max="1000" value="0" />
<div id="seekMarkers" class="seek-markers" aria-hidden="true"></div>
<div id="abIndicator" class="ab-indicator hidden">
@@ -151,6 +154,7 @@
</div>
<span id="durTime" class="time">0:00</span>
</div>
<button id="waveLoud" class="wave-loud hidden" type="button">⚡ Jump to the loudest part</button>
<div class="btn-row">
<button id="prevBtn" class="ctrl" title="Previous">⏮</button>
<button id="playBtn" class="ctrl play" title="Play/Pause">▶</button>
@@ -188,6 +192,7 @@
<button id="shuffleBtn" class="ctrl" title="Shuffle upcoming tracks (S)">🔀</button>
<button id="loopBtn" class="ctrl" title="Loop current video (L)">🔂</button>
<button id="repeatBtn" class="ctrl" title="Repeat list when finished (R)">🔁</button>
<button id="transitionBtn" class="ctrl" title="Between songs in a playlist: Normal — click to change">↦</button>
<button id="fsBtn" class="ctrl" title="Fullscreen">⛶</button>
</div>
</div>