Question

对于我的新网页，我需要集成一个波形音频播放器，我正在使用wavesurfer.js 包。正如他们所说的那样，在波浪形式的不同位置添加自定义标记，直到现在我都没有这样做。我的代码如下：

'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})
});

在控制台中收到如下错误：

Uncaught TypeError: undefined is not a function

有人可以为此提出解决方案吗？

Answer 1

如果您找到解决方案，我不知道，但您可以将其标记为区域。添加下面而不是您的地区代码：

// 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

您可以通过在音频初始化

之后调用就绪来实现此功能

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)'
                    });

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

2 个答案: