Adds components to the AudioClipper components to display the clip window and handles to drag the clip window, as well as to activate clipping and the clipping toolbar
Add useClipper hook, which implements the clipping functionality and exposes props for the clipping UI
Changes to useSpectrogram are required so we can expose the spectrogram center (required to calculate the position of the clip window) and an indicator for dragging events to prevent resetting the clip window when dragging the spectrogram
NOTE The following still need to be implemented:
Apply the clip before sending the search request to the API
Editing the clip start/end times via the input. I decided to punt on this because it's more complex than initially thought. We're displaying the time as mm:ss, so we need to work around the colon in the input, making sure you can't delete, validate that the entered value is correct, (ie. you can't select a time outside the length of the audio, you can't enter invalid times like 01:63, and converting to seconds when handling the input)
Implements clipping
AudioClipper
components to display the clip window and handles to drag the clip window, as well as to activate clipping and the clipping toolbaruseClipper
hook, which implements the clipping functionality and exposes props for the clipping UIuseSpectrogram
are required so we can expose the spectrogram center (required to calculate the position of the clip window) and an indicator for dragging events to prevent resetting the clip window when dragging the spectrogramNOTE The following still need to be implemented:
mm:ss
, so we need to work around the colon in the input, making sure you can't delete, validate that the entered value is correct, (ie. you can't select a time outside the length of the audio, you can't enter invalid times like01:63
, and converting to seconds when handling the input)