bbc / peaks.js

JavaScript UI component for interacting with audio waveforms
https://waveform.prototyping.bbc.co.uk
GNU Lesser General Public License v3.0
3.2k stars 279 forks source link

Overlay segment feature not available in latest plugin version 2.1.0 ? #468

Closed Arjun021 closed 1 year ago

Arjun021 commented 1 year ago

I checked the demo of overlay segments and it's fulfilling my requirements. I installed the latest version of peaks.js (2.1.0) and followed the same code given in the demo. But after using same code, still I am not able to get the overlay segment as displayed in the demo.

Is there anything I am missing in this or is the overlay segment feature not yet available in the latest version?

let options: any = {
      zoomview: {
        container: document.getElementById('zoomview-container'),
        showPlayheadTime: true,
      },
      overview: {
        container: document.getElementById('overview-container')
      },
      mediaElement: document.getElementById('audio'),
      dataUri: {
        arraybuffer: this.spectrographURL,
      },
      waveformCache: true,
      showPlayheadTime: true,
      zoomLevels: [256, 512, 1024, 2048, 4096],
      segmentOptions: {
        style:                     'overlay',
        waveformColor:             '#ff851b',
        overlayColor:              '#ff0000',
        overlayOpacity:            0.3,
        overlayBorderColor:        '#ff0000',
        overlayBorderWidth:        2,
        overlayCornerRadius:       5,
        overlayOffset:             40,
        overlayLabelAlign:         'left',
        overlayLabelVerticalAlign: 'top',
        overlayLabelPadding:       8,
        overlayLabelColor:         '#000000',
        overlayFontFamily:         'sans-serif',
        overlayFontSize:           14,
        overlayFontStyle:          'normal'
      },
      createSegmentLabel: function() { return null; },

My end result is coming as per below

image

The expected result is as per below

image
chrisn commented 1 year ago

This feature isn't in a release version yet, the latest v2.1.0 release doesn't include it. I'm planning to make a beta version soon. There's still some work to do on documentation.

Arjun021 commented 1 year ago

Okay @chrisn , thanks for the update. This feature is really helpful. Hope it gets released soon 😃

chrisn commented 1 year ago

It's coming soon, yes! I'm very interested in your feedback and suggestions, or if you find any issues.

alxpsr commented 1 year ago

Looking forward ^_^

chrisn commented 1 year ago

Version 3.0.0-beta.0 is now released, which includes overlay and draggable segments. Please see doc/migration-guide.md as there are some breaking API changes. There may be bugs, feedback welcome!

npm install peaks.js@beta
chrisn commented 1 year ago

I'll close this, but please raise new issues if you have suggestions.