andyburke/autonomous.contact
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature: improved audio player UX

Browse source
This commit is contained in:
Andy Burke 2025-08-21 21:30:53 -07:00
parent ef98fc754d
commit 0ed013c968
6 changed files with 620 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

26
public/tabs/talk/talk.js
View file

@ -182,11 +182,35 @@ const URL_MATCH_HANDLERS = [
if (mime_types[0].indexOf("audio") === 0) {
return `
<div class="embed-container short">
<div class="audio-container" tabindex="-1">
<audio controls>
<source src="${link_info.url}" type="${mime_types[0].indexOf("audio/mpeg") === 0 ? "audio/mpeg" : mime_types[0]}">
Your browser does not support the audio element.
</audio>
<div class="enhanced-audio-player-container">
<div class="audio-player-display-container">
<canvas class="audio-player-display"></canvas>
</div>
<div class="audio-controls-container">
<div class="progress-container">
<div class="time-container"><span class="current">00:00</span></div>
<div class="slider-container">
<input type="range" name="progress" title="" min="0" max="1000" step="1" value="0" />
<label class="time-container" for="progress"><span class="current">00:00</span></label>
</div>
<div class="time-container"><span class="duration">00:00</span></div>
</div>
<div class="buttons-container">
<div class="audio-control blank"></div>
<div class="audio-control skip-back"><div class="icon skip-back"></div></div>
<div class="audio-control play-pause-toggle"><div class="icon play"></div><div class="icon pause"></div></div>
<div class="audio-control skip-forward"><div class="icon skip-forward"></div></div>
<div class="audio-control volume">
<input type="range" name="volume" title="Volume" min="0" max="100" step="1" value="" />
</div>
</div>
</div>
</div>
</div>`;
}
}