Py.Cafe

awesome.panel.org/

pycafe-reference-1

The pycafe reference example for Panel

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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()