Allow user to update peaks and/or duration with setOptions #3982
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
src/wavesurfer.tsOops! Something went wrong! :( ESLint: 9.17.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by WalkthroughThe pull request modifies the Changes
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
src/wavesurfer.ts
Outdated
| @@ -540,6 +540,11 @@ class WaveSurfer extends Player<WaveSurferEvents> { | |||
| this.options.interact = isInteractive | |||
| } | |||
|
|
|||
| /** Update the visual progress */ | |||
| public updateVisualProgress(time = this.getCurrentTime(), isPlaying = this.isPlaying()) { | |||
There was a problem hiding this comment.
I'm reluctant to add a low-level method like this to the public API, especially since it's targeting quite an edge case.
You can easily render wavesurfer w/o playback by providing peaks and duration but no audio. See this example:
https://wavesurfer.xyz/examples/?0f80252d71c2f4a1ead0a572e1cefad3
It will still respond to setTime or seekTo but no actual playback will be happening, so you can visually sync it to an external player.
|
So i've updated this PR, let me know if you think this is something that should be part of the libraries functionality. Rather than destroying and initialising the wavesurfer all over again to update the duration (my application has a time stretch feature where the playback speed can be changed, therefore the duration of the same waveform can change. e.g. Warp in Ableton) |
botoxparty
changed the title
|
Released in 7.8.15. |
Issue: Need a way to update visual progress without triggering 'seeking' events
Current Behavior
When syncing WaveSurfer with external audio/time sources (like Tone.js transport), calling
setTime()triggers the 'seeking' event because it updates both the media element's time and the visual progress. This will allow seeking and interact events to continue to work when syncing with an external source.Problem
In scenarios where WaveSurfer is being used as a visual representation of audio that's controlled externally, we don't always want to trigger the media element's seeking behavior. Currently, there's no clean way to update just the visual progress without triggering seeking events.
Proposed Solution
Add a new public method to update only the visual progress
Let me know your thoughts, maybe you have a better solution with a your understanding of the lib.
Summary by CodeRabbit
New Features
Improvements