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

Wavesurfer.js : How to display custom markers?

本文关键字：显示 自定义 js 何显示 Wavesurfer      更新时间：2023-09-26

对于我的新网页，我需要集成一个波形音频播放器，我使用的是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

有人能提出解决方案吗？

我不知道你是否找到了一些解决方案，但你可以标记为区域。添加以下代码而不是您的地区代码：

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

您可以通过在音频初始化后调用ready来实现这一点

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)'
                    });
相关文章：