wavesurfer.js not showing. but playing

[MarcSkovMadsen]

Context

I'm trying to help a user of HoloViz Panel using wavesurfer.js in https://discourse.holoviz.org/t/wavesurfer-js-time-series-and-spectrograms-just-how-hard-can-it-be/8491.

Panel is the 3rd most used dashboarding framework in Python according to latest Jetbrains developer survey.

Bug description

I can get wavesurfer playing. But not showing.

Environment

• Browser: Edge

Minimal code snippet

pip install panel

Create a file app.py.

import panel as pn
import param

from panel.custom import JSComponent

pn.extension()

class WaveSurfer(JSComponent):

    value = param.Integer()

    _esm = '''
    import WaveSurfer from 'https://cdn.jsdelivr.net/npm/wavesurfer.js@7/dist/wavesurfer.esm.js'

    export function render({ model, el }) {
        function callback(){
            const wavesurfer = WaveSurfer.create({
                container: el,
                waveColor: 'rgb(200, 0, 200)',
                progressColor: 'rgb(100, 0, 100)',
                url: 'https://assets.holoviz.org/panel/samples/beatboxing.mp3',
                fetchParams: {
                    mode: 'no-cors',
                },
            })

            wavesurfer.on('interaction', () => {
                wavesurfer.play()
            })
        }

        model.on('after_render', callback)
    }
    '''

WaveSurfer(height=200, width=500, styles={"border": "1px solid black"}).servable()

Serve the application with

panel serve app.py --dev

You can also run this in the browser here without installing or serving anything.

When I click the wavesurfer container element it starts playing. But the wavesurfer is never shown. Inspecting the browser console elements I can see that the canvas elements are never created. But I do see some activitity in the div elements that should contain the canvas elements.

For context Panel is also displaying elements inside shadow dom. So could that cause the issue?

Expected result

Wavesurfer would should

Obtained result

Wavesurfer not showing

Video

wavesurferjs.mp4

[katspaugh]

If it plays but doesn't show a waveform, it most likely means that it failed to decode the audio with Web Audio. You can check what error is thrown by doing this:

wavesurfer.on('error', (err) => {
  console.log('Wavesurfer error', err)
})