search

aaaaargZombies / audio-player

Progressivly enhanced audio element (WIP 🚧)
BSD 3-Clause "New" or "Revised" License
0 stars 0 forks source link

[feat] display static representation of track - histogram or similar #4

Open aaaaargZombies opened 5 months ago

aaaaargZombies commented 5 months ago

At the moment the component renders waveform as the track plays. I think it would be nicer to render a static graphical representation of the track which can used to help you navigate track position. see soundcloud or audacity

image

image

image

aaaaargZombies commented 5 months ago

current state

chucked some data on the screen mostly via this ugly drawTrack function

https://github.com/aaaaargZombies/audio-player/blob/815c2fc0b7661701281881487634daa7b2a333db/src/audio-player.ts#L180-L233

image

some thoughts:

https://github.com/aaaaargZombies/audio-player/blob/815c2fc0b7661701281881487634daa7b2a333db/src/audio-player.ts#L74-L109

You need to grab the whole file to generate the chart, and this results in a wait before we can process it. It took about 1 second to load I'm serving the file over HTTP not reading from disk but it's still on my machine so can only really get worse. This meant I needed to handle some loading states, which typescript relatively painless but I missed Elm here.

https://github.com/aaaaargZombies/audio-player/blob/815c2fc0b7661701281881487634daa7b2a333db/src/audio-player.ts#L4-L8

https://github.com/aaaaargZombies/audio-player/blob/815c2fc0b7661701281881487634daa7b2a333db/src/audio-player.ts#L160-L171

One thing that could be nice would be to animate the chart when playing so there's some movement and it is in sync with the audio.

aaaaargZombies commented 5 months ago

I could potentially make the histogram a loading spinner too.