Audio player chakra - Githubissues

developmentseed / bioacoustics-frontend

Frontend code for the Google Bioacoustics project that's used by A2O Search

https://search.acousticobservatory.org/

MIT License

2 stars 0 forks source link

Audio player chakra #32

Closed oliverroick closed 1 year ago

oliverroick commented 1 year ago

Implements the audio player with Chakra components

Adds useAudioPlayer hook, which implements the logic got playing and scrubbing. It uses an audio element, which is initialised not added to the DOM, so we can use the built-in browser APIs for playing the audio and manage scrubbing. The hook also exposes props to be passed to UI elements
Adds play/pause buttons, the scrubber and time indicators for the toolbar below the spectrogram
Extends the useSpectrogram hook to calculate the current play position on the spectrogram

oliverroick commented 1 year ago

For the playhead cursor, should we try to adapt the wavesurfer playhead/cursor plugins? It looks like these would give us the current time marker (available in the v6 version)

Happy to explore this, but probably at a later time.

LanesGood commented 1 year ago

Changed the play/pause buttons to icon buttons to avoid the layout shifts.

In addition to the playhead question above; I think we need to make some adjustments to the timebox inputs. (This could be in seperate). The UI should anticipate clips up to 5 minutes long; we should pad the input to fit a mm:ss format. I don't think we'll need to fit an hh:mm:ss or even miliseconds, though that is supported on A2O's listening platform.