Event when scroll occurs during playback?

[larrywal]

If I play a song and the current time in playback exceeds what's shown in the zoomed waveform, the waveform scrolls forward to keep the current time visible.

Is there a way to get an event when that happens?

[chrisn]

There is already a zoomview.displaying event that gives you the start and end time when the waveform view scrolls (either automatically or if the user drags the view). This is an implementation detail, so not part of the Peaks.js API - I will probably rename this event if we want to make it part of the API.

[larrywal]

Thanks much @chrisn - tried to hook it like I did other events but there's no TypeScript definition for it. Also, it seems to fire a ton - like even if I'm just hovering over it. Do you have a small example typescript code that shows its use?

Not sure (need to play more) but when I directly set the view using a function (e.g. setZoom) I think the event may be firing. Is that possible?

[chrisn]

OK, so that event may not be what you need. Do you need an event for when the displayed time region changes for any reason, not just the automatic update during playback? For example, also on changing zoom level, or when user drags to scroll the view?

[larrywal]

Ideally yes. I have a separate timeline control and I'm trying to keep the exact zoom / viewport sync'd between that control and this.

[chrisn]

Peaks.js uses the zoomview.displaying event to sync its own viewport display in the overview waveform (the lower waveform in demo/index.html). The event doesn't fire on hovering, only when the waveform viewport changes. Can you explain more about it firing too much?

I can see two minor problems with using this event:

• It fires if you click to change the playhead position, but the viewport doesn't change (which seems like a bug).
• It fires when the waveform views are first created, but before you can attach an event handler, so the following code won't give you the initial viewport state:

Peaks.init(options, (err, peaks) => {
  peaks.on('zoomview.displaying', (start, end) => { ... });
});