Implementing Dual Resolution Waveform with Peaks.js

[cubancodepath]

I'm embarking on an intriguing project that necessitates the visualization of audio tracks, and I've opted to utilize Peaks.js for this purpose. My project requires a unique setup where I need to display two waveforms for the same audio track: one that showcases the entire track at a low resolution (ideal for an overview) and another that provides a high-resolution view of a selected segment of the track (essentially, a zoomed-in detail view).

To facilitate this, my approach involves leveraging two distinct data sources:

Low-Resolution Data Source: Supplies the basic peaks data to render the entire track in a waveform that doesn't require fine detail.
High-Resolution Data Source: This is used when a specific section of the audio is selected for closer examination. I can specify the start and end times, and it provides the detailed peaks data for rendering a high-resolution waveform of that segment.
Given the nature of Peaks.js and its capabilities, my questions are as follows:

Is it feasible to utilize Peaks.js to achieve this dual-resolution waveform visualization within a single interface?
How can I effectively manage and synchronize two instances of Peaks.js (if two instances are indeed necessary) to simultaneously display both the low-resolution and high-resolution waveforms? Specifically, I'm curious about the best practices for dynamically updating the high-resolution waveform based on user interactions with the low-resolution waveform.
Are there any recommended strategies or patterns for ensuring seamless playback and interaction between these two waveform visualizations?
I would greatly appreciate any advice, examples of similar implementations, or code snippets that could guide me in achieving this functionality. Insights into handling the Peaks.js configurations or optimizations for this use case would also be invaluable.

[chrisn]

Peaks.js does pretty much everything you describe. I recommend that you look at the demo pages.