Wavesurfer.js: Feature request: optional text-labels for regions

[CramericaIndustries]

Hi,
as the title says, I would be really happy if you could implement text-labels for regions. Once implemented , one could add those labels via the region options object. The text label should be style able via CSS (to setup font-size, color etc.) and maybe have a flag if it should be displayed at the top or at the bottom of the region to reduce the risk of overlapping.

What do you think?

[katspaugh]

Regions already have a custom attributes parameter which can be used to display a label.

Here's an example:

wavesurfer.addRegion({
  start: 1,
  end: 3,
  attributes: {
    label: 'Region Name1'
  }
});

In CSS:

region.wavesurfer-region:before {
    content: attr(data-region-label);
    position: absolute;
    top: 0;
}

See here as well: https://github.com/katspaugh/wavesurfer.js/blob/master/example/annotation/app.css#L1-L3

[CramericaIndustries]

Ah sorry, didn't know that!
Maybe you should mention that this exists on the regions-plugin page:
http://wavesurfer-js.org/plugins/regions.html

[katspaugh]

I will, thanks!

[tonmoymatrix]

It's awesome
workes for me.