Wavesurfer.js：如何显示自定义标记？

Question

For my new webpage I need to integrate a wave formed audio player and I am using wavesurfer.js package. As they are saying about adding custom markers at different positions in wave form, I didn't get that working till now. My code is as below:

'use strict';

// Create an instance
var wavesurfer = Object.create(WaveSurfer);

// Init & load audio file
document.addEventListener('DOMContentLoaded', function () {
var options = {
    container     : document.querySelector('#waveform'),
    waveColor     : 'violet',
    progressColor : 'purple',
    loaderColor   : 'purple',
    cursorColor   : 'navy'
};

if (location.search.match('scroll')) {
    options.minPxPerSec = 100;
    options.scrollParent = true;
}

if (location.search.match('normalize')) {
    options.normalize = true;
}

// Init
wavesurfer.init(options);
// Load audio from URL
wavesurfer.load('example/media/demo.wav');


// Regions
if (wavesurfer.enableDragSelection) {
    wavesurfer.enableDragSelection({
        color: 'rgba(0, 255, 0, 0.1)'
    });
}
});

// Play at once when ready
wavesurfer.on('ready', function () {
wavesurfer.play();
wavesurfer.mark({id: 'chorus', position: 10})
});

And getting an error as below in console:

Uncaught TypeError: undefined is not a function 

Can anybody suggest a solution for this ?

Answer 1

I dunno if you find some solution, but you can mark as region. add below instead of your region code:

// Region
if (wavesurfer.enableDragSelection) {
  region = wavesurfer.addRegion({
    start: 5,
    end: 5 + 0.5,
    resize: false,
    drag: false,
    color: 'rgba(255,0,0, 0.7)'
  });
}

Answer 2

You can get this working by calling on ready after the initialization of audio

wavesurfer.on('ready', function () {

                    // Adding a couple of pre-defined regions
                    wavesurfer.addRegion({
                        start: 5, // time in seconds
                        end: 8, // time in seconds
                        color: 'hsla(100, 100%, 30%, 0.1)'
                    });