apunkt/ASCILINE
1
0
Fork 0
mirror of https://github.com/YusufB5/ASCILINE.git synced 2026-06-17 22:35:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: Add seek bar, pause/resume, and optimize async audio streaming

Browse source
This commit is contained in:
YusufB5 2026-06-17 14:05:29 +03:00
parent 88b261eae9
commit 27aeca9d20
5 changed files with 220 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

18
index.html
View file

@ -53,11 +53,21 @@
</div>
<!-- Player Controls Bar -->
<div class="player-controls">
<div class="player-controls" style="display: flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 0; border-top: 1px solid #333; margin-top: 10px; width: 100%;">
<!-- Play/Pause -->
<div class="ctrl-group" style="flex: 0 0 auto;">
<button id="play-pause-btn" style="background: none; border: none; color: var(--accent-color, #00ff41); font-family: monospace; font-size: 16px; cursor: pointer;">❚❚</button>
</div>
<!-- Seek Bar -->
<div class="ctrl-group seek-group" style="flex: 1; max-width: 500px; display: flex; align-items: center;">
<span id="time-current" style="margin-right: 10px; font-size: 12px; color: #888; flex-shrink: 0; width: 35px; text-align: right;">00:00</span>
<input id="seek-slider" type="range" min="0" max="100" step="0.1" value="0" style="flex: 1; cursor: pointer; accent-color: var(--accent-color, #00ff41);">
<span id="time-total" style="margin-left: 10px; font-size: 12px; color: #888; flex-shrink: 0; width: 35px;">00:00</span>
</div>
<!-- Volume Control -->
<div class="ctrl-group">
<span class="ctrl-icon">VOL_</span>
<input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1">
<div class="ctrl-group" style="display: flex; align-items: center; flex: 0 0 auto;">
<span class="ctrl-icon" style="margin-right: 5px; color: #888;">VOL_</span>
<input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1" style="cursor: pointer; width: 60px; accent-color: var(--accent-color, #00ff41);">
</div>
</div>