Electron + Wavesurfer waveform not showing.

Wavesurfer.js version(s): 3.0.0(?)

Browser and operating system version(s):

Chromium on Windows 10 1903

Code needed to reproduce the issue:

        <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark text-center">
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-secondary" id="prev" onclick="wavesurfer.skipBackward()"><i class="material-icons">skip_previous</i></button>
                <button type="button" class="btn btn-secondary" id="play" onclick="wavesurfer.playPause(); if (document.getElementById('playpause').innerText == 'pause') {document.getElementById('playpause').innerText = 'play_arrow'} else {document.getElementById('playpause').innerText = 'pause'};"><i class="material-icons" id="playpause">pause</i></button>
                <button type="button" class="btn btn-secondary" id="next" onclick="wavesurfer.skipForward()"><i class="material-icons">skip_next</i></button>
            </div>
            <div id="waveform" style="display: none"></div>
            <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
              <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
            </ul>
          </nav>

Use behaviour needed to reproduce the issue:

I’m using Electron.js v6.0.6 with Wavesurfer.js to make an app. Electron uses Chromium as the browser.

My issue is that the waveform does not show up when it should be made. My code to generate the waveform is here:

        stream.on('finish', () => {
            console.log('stream end');
            wavesurfer.load('./temp_music/song.mp3');
            wavesurfer.on('ready', () => {
              wavesurfer.drawer.container.style.display = '';
              wavesurfer.drawBuffer();
              ytdl.getBasicInfo(id, (err, info) => {
                if (err) throw err;
                console.log(info)
                var jsonSend = {
                  dur: wavesurfer.getDuration(),
                  author: info.author.name,
                  title: info.title
                }
                require('electron').ipcRenderer.send('presence', jsonSend)
              })
              wavesurfer.play()
            })
        });

Here is what it looks like https://dabon.me/ASBIgD7c.png

The middle empty space is where the waveform should be, but it isn’t showing.

What do I do?

Thanks.

[thijstriemstra]

Why are you using this code?

wavesurfer.drawer.container.style.display = '';
wavesurfer.drawBuffer();

[ygwStudy]

Why are you using this code?

wavesurfer.drawer.container.style.display = '';
wavesurfer.drawBuffer();

Thans！Using “wavesurfer.drawBuffer()” after “wavesurfer.drawer.updateSize()” can resize the canvas.