Clear minimap when new audio is loaded

[kevinleethompson]

I have a player that loads files when you click on them. The new waveform is loaded and new audio plays, but the minimap from the previous one stays and the new minimap is drawn on top of it. If you select another file, then you have three minimaps on top of eachother, and they don't clear until you refresh the page.

How do I make the minimap go away when a new file is loaded?

[katspaugh]

It's a bug in the minimap plugin. It should listen to wavesurfer's destroy event and remove itself from DOM.

[Lingomat]

It listens but it has no destroy function. I added one, and it still didn't work. It seems the correct way to load a new waveform is to call destroy(), reinitialise and then load. Everything else in wavesurfer works just fine if you just call load() again, maybe with some clearing of regions etc.

[katspaugh]

It listens but it has no destroy function.

It has a destroy function. It's inherited from the WaveSurfer.Drawer.Canvas object.

it still didn't work

Yes, there seems to be some bug.

[Lingomat]

Okay, that's odd, because it works after I inserted the destroy function.

[chrisparton1991]

Can we close this, @katspaugh and @Lingomat?

[katspaugh]

@chrisparton1991 unless I've missed something, the minimap hasn't been touched since the time this was filed.

[chrisparton1991]

I saw the last comment by @Lingomat and thought it might have fixed the issue. Just wanted to check if it was still needed as it's been sitting still for a while.

I can take a look at this some time soon if it's still an issue.

[Lingomat]

It was probably something else I did related to lifecycle. Not an active issue for me anyway.

[taylorvc]

I'm not sure if this is directly related to the initial issue described, but I am having an issue with loading a new waveform. I have a clipping option, which trims out unwanted areas of audio. I reload the wavesurfer with a new audio file and clear any defined regions:

wavesurfer.regions.clear();
wavesurfer.load('/content/test-cut2.mp3', points);

The new waveform loads and works fine for zooming and playback. However, when I attempt to draw a new region, it creates two regions. I'm assuming this is because there are two instances of the waveform container on top of each other.

So, I went another route to actually destroy the waveform and reinitialize it with the new audio file.

function cut() {
        // destroy wavesurfer object
         wavesurfer.destroy();
       // test cut of first 30 seconds of file
          for(var i=0; i < points.length; i++) {
            if(i > 600) {
              newPoints.push(points[i]);
            }
          }
          reinitialize(newPoints);
        }

        function reinitialize(array) {
            var points = array;
            var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            progressColor: '#ff9933',
            waveColor: '#ff6600',
            normalize: true,
            backend: 'MediaElement',
            renderer: 'MultiCanvas',
            height: 300,
            cursorWidth: 2
          });

          wavesurfer.load('/content/test-cut2.mp3', points);

          wavesurfer.on('ready', function() {

            var timeline = Object.create(WaveSurfer.Timeline);

            timeline.init({
              wavesurfer: wavesurfer,
              container: '#waveform-timeline'
            });

            // Enable creating regions by dragging
            wavesurfer.enableDragSelection({});

          });

        }

This generates the new clipped waveform, but playback and zooming returns errors.
"wavesurfer.js:785 Uncaught TypeError: Cannot read property 'play' of null(…)"
"wavesurfer.js:764 Uncaught TypeError: Cannot read property 'duration' of null(…)"

I logged out the wavesurfer object after it is reinitialized and it is defined with the new audio file (test-cut2.mp3) as its currentSrc. Am I just missing a step? Any help is greatly appreciated!

[entonbiba]

@tanky-shang I'll have a look at the minimap being refreshed when new audio is loaded.

For now you can do something like this in jquery, before calling wavesurfer.initMinimap();.

<div id="wavesurfer1">
wavesurfer will load in here
</div>

// remove the current minimap
$('#wavesurfer1 wave:eq(1)').remove();
// after initialize the minimap plugin
wavesurfer.initMinimap();

[mspae]

Will be fixed when #1203 is merged and released.