Custom plugins for time marking with flags and sequential numbers

[shinenic]

Hello to the authors of wavesurfer.js,

Thanks for the amazing project and its intuitive API interface. While exploring the capabilities, I've noticed the functionality provided by the "Region" plugin, and I am interested in achieving a similar result. Specifically, I would like to display "flags" above the waveSurfer, each labeled with a sequential number. I'm unsure if this can be easily accomplished using the existing APIs.

To illustrate the feature I have in mind, I've created a simple demo. In this demo, users can add flags, drag them around, and remove them as needed. Each flag is assigned a sequential number. The primary purpose of this feature is marking measures or beats in a music audio track.

I would appreciate your thoughts on this idea and would be willing to contribute if you think it's worth creating a new plugin for it.

Screen.Recording.2024-01-24.at.11.01.15.PM.mov

[katspaugh]

Regions should take you about 90% there. You can specify only a startTime for a region and it then becomes a thin line. A flag can be added via CSS. See https://wavesurfer.xyz/examples/?styling.js

[bernardwiesner]

Hi @katspaugh

I would like to expand on the original question. If I need to add an additional button next to the flag to remove it, what would you recommend?

[katspaugh]

You can pass any HTML element in the content property of a region.

[bernardwiesner]

@katspaugh
thanks, it works, however I am having issues with the negative absolute positioning of the content element. I might be missing something obvious, but I can't manage to position the flag above the waveform, its always hidden.

element.style {
    position: absolute;
    top: -20px;
    z-index: 999999;
}

Is there something I am missing?

[katspaugh]

The scroll part of the waveform doesn't allow overflow, so anything above will be hidden. You can add a padding as a workaround:

.your-container ::part(scroll) {
  padding: 20px 0;
}

See https://wavesurfer.xyz/examples/?styling.js

[bernardwiesner]

Thanks, works!