使用带有区域插件的 wavesurfer.js，我试图通过 js 管理区域。 波形绘制正确，但是：
事件加载和波形就绪不起作用（console.log 未触发） 就像没有创建 wavesurfer 实例一样。
创建新区域的按钮不起作用：错误是“wavesurfer.addRegion 不是函数 ”。 就像没有加载 wavesurfer.regions.js 但绘制了第一个区域。
我的代码：
需要JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/6.6.2/wavesurfer.min.js" integrity="..."></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/6.6.2/plugin/wavesurfer.cursor.min.js" integrity="..."></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/6.6.2/plugin/wavesurfer.regions.min.js" integrity="..."></script>
HTML
<body>
<div id="waveform"></div>
<button type="button" class="add_region">add</button>
</body>
JS
/* init wavesurfer */
var wavesurfer = WaveSurfer.create({
container: '#waveform',
barHeight: 5,
forceDecode: 400,
backgroundColor: 'white',
waveColor: 'lightgray',
cursorColor: 'yellow',
progressColor: 'black',
partialRender: true,
responsive: true,
skipLength: 5,
height: 300,
showTime: true,
opacity: 1,
plugins: [
WaveSurfer.cursor.create({
showTime: true,
opacity: 1,
customShowTimeStyle: {
'background-color': '#000',
color: '#fff',
padding: '2px',
'font-size': '10px'
}
}),
WaveSurfer.regions.create({
regionsMinLength: 5,
regions: [
{ start: 10, end: 10, color: 'rgba(0, 0, 255, 0.2)' }
]
})
]
}).load('test.mp3');
wavesurfer.on('loading', function () {
console.log('loading');
});
wavesurfer.on('ready', function () {
console.log('ready');
});
wavesurfer.on('waveform-ready', function () {
console.log('waveform is ready');
});
/* new region */
$('.add_region').on('click', function() {
wavesurfer.addRegion({
start: 0,
end: 30,
color: 'rgba(255, 0, 0, 0.2)'
});
});