Take endtime dynamically while creating segments.

[sudipta1411]

I have a use case where the user wants to click on the waveform time to get the start time and end time, the use this value to create a segment. How to achieve this? Thanks

[chrisn]

At the moment Peaks.js only supports adding segments through the peaks.segments.add() method, which requires the start and end times as parameters. Allowing users to add segments through the UI would be a useful addition to the library.

To implement this we'd need to modify the mouse click and drag handling, which at the moment are used to scroll the waveform (zoom view) or set the playback position (overview). So we'd need a way to put the views into a "segment editing mode". This could be toggled by a separate UI button or keyboard shortcut.

This sounds like a nice feature, which we'd be happy to add to the library.

[chrisn]

To answer the question more directly, you can use the zoomview.click event to find out the time position where the user clicked, store the times of the first and second click, then use these to create a segment:

// Disable seek on click.
const zoomview = peaks.views.getView('zoomview');
zoomview.enableSeek(false);

const clickTimes = [];

peaks.on('zoomview.click', (event) => {
  clickTimes.push(event.time);

  if (clickTimes.length == 2) {
    // Sort in ascending time order.
    clickTimes.sort((a, b) => { return a - b });

    peaks.segments.add({
      startTime: clickTimes[0],
      endTime: clickTimes[1],
      editable: true,
      labelText: "New segment"
    });

    clickTimes.length = 0;
  }
});

Enabling the user to create segments using click+drag is tracked in issue #499.