Multiple waveform instances do not generate waveform.

Hi,

Let me start off by saying I love your lib.

Trying to implement a slider (with multiple wavesurfer instances, some are “hidden”), using wavesurefr v1.0.53. Currently the waveform is generated in the FE. The code which generates them looks like this:

    var $parentContainer = $(item.closest('.slide')),
        $smallAudioPlayButton = $parentContainer.find('.js-audio-play'),
        $bigAudioPlayButton = $parentContainer.find('.js-slider-audio-play'),
        $currentLength = $parentContainer.find('.js-audio-current-position'),
        $totalLength = $parentContainer.find('.js-audio-total-length');

    var player = wavesurfer.create({
        audioContext: ctx,
        container: item,
        waveColor: 'white',
        progressColor: '#00B22D',
        barWidth: '2',
        backend: 'MediaElement',
        height: '60'
    });

    player.load(item.getAttribute('src'));

    player.on('finish', function() {
        $smallAudioPlayButton.removeClass('fa-pause-circle');
        $smallAudioPlayButton.addClass('fa-play-circle');
        player.seekTo(0); // rewind!
    });

    player.on('audioprocess', function(currentDuration) {
        // wavesurfer bug.
        if (currentDuration < 1) {
            return;
        }
        $currentLength.text(durationToText(currentDuration));
    });

    player.on('ready', function() {
        $totalLength.text(durationToText(player.getDuration()));
    });

    m.audioPlayers.push(player);

});

The problem I’m facing is that the waveform for the first audio is generated, but then the rest don’t, no console/js errors.

Any help / entry point to start debugging would be greatly appreciated.

Best regards & Happy new years! Ben.

[chrisparton1991]

Is there any chance of you making a CodePen that reproduces the issue? You could also try updating to a later version of Wavesurfer if that’s possible for your project, there have been quite a few changes since v1.0.53.

[ghost]

Hi @chrisparton1991 @katspaugh Apparently as @chrisparton1991 suggested the visibility: hidden solution worked, and I’ve missed a parent container which had display: none.

Thank you for your help and sorry to have wasted your time. Keep up the awesome job, this project is great!