多个wavesurfer.js播放器

Question

当我在一个页面上有超过一个实例时，玩家就不能正常工作了，我想我必须创建一个类似于某些类型的前科，如果有人能帮我解决这个问题，我会非常感激的。

我现在拥有的是：

<script src='https://unpkg.com/wavesurfer.js'></script>
<script>
  duration = document.querySelector('#duration');
current = document.querySelector('#current');
playPause = document.querySelector('#playPause');
var timeCalculator = function (value) {
    second = Math.floor(value % 60);
    minute = Math.floor((value / 60) % 60);
    if (second < 10) {
        second = '0' + second;
    }
    return minute + ':' + second;
};

wavesurfer = WaveSurfer.create({
    container: '#wave',
    waveColor: '#a43152',
    progressColor: '#5b1b2d',
    height: 30,
    barRadius: 2,
    barWidth:3,
    barGap:2,
    scrollParent: false
});

wavesurfer.load('files/$title.mp3');

playPause.addEventListener('click', function (e) {
    wavesurfer.playPause();
});

wavesurfer.on('ready', function (e) {
    duration.textContent = timeCalculator(wavesurfer.getDuration());
});

wavesurfer.on('audioprocess', function (e) {
    current.textContent = timeCalculator(wavesurfer.getCurrentTime());
});

wavesurfer.on('play', function (e) {
    playPause.classList.remove('fi-rr-play');
    playPause.classList.add('fi-rr-pause');
});

//change pause button to play on pause
wavesurfer.on('pause', function (e) {
    playPause.classList.add('fi-rr-play');
    playPause.classList.remove('fi-rr-pause');
});

wavesurfer.on('seek', function (e) {
    current.textContent = timeCalculator(wavesurfer.getCurrentTime());
});
</script>";

Answer 1

您需要使用不同的ID创建多个wavesurfer实例。因此，您可以通过使用for循环来创建每个

容器：“#wave”+索引

在for循环中，还需要添加播放/暂停/查找的侦听器.

唯一的问题是加载所有的mp3s，如果您正在加载2-5个较小的文件，您应该很好，但加载更多会降低您的页面性能。我建议使用drawBuffer()，然后在用户单击play时加载mp3s。