Link timestamp from wavesurfer.js Audio visualisation to ipywidget slider using jp_proxy_widget

link_audio_jupyter_wavesurfer.py

## See this blog for original post about jp_proxy_widget and wavesurfer.js https://blog.ouseful.info/2020/01/11/rapid-widget-prototyping-using-third-party-javascript-packages-in-jupyter-notebooks/ 

import jp_proxy_widget
import ipywidgets as widgets

widget = jp_proxy_widget.JSProxyWidget()

js = "https://unpkg.com/wavesurfer.js"
js2="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js"
url = "https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3"

widget.load_js_files([js, js2])

slider = widgets.FloatSlider()
def on_time_update(time):
    slider.value = float(time)

def on_ready(length):
    slider.max = float(length)
    
widget.js_init("""
element.empty();
element.wavesurfer = WaveSurfer.create({
    container: element[0],
    waveColor: 'violet',
        progressColor: 'purple',
        plugins: [
        WaveSurfer.spectrogram.create({
            wavesurfer: element.wavesurfer,
            container: element[0],
            fftSamples:512,
            labels: true
        })
    ]
});
 
 
element.wavesurfer.load(url);

var currentTime = 0

const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

on_time_update:
    var time_update = throttle(function() {
        on_time_update( element.wavesurfer.getCurrentTime());
    }, 250);
    element.play = function() {
        element.wavesurfer.play();
    }
    element.pause = function() {
        element.wavesurfer.pause();
    }

    $('<button type="button">Play</button>').click(element.play).appendTo(element);
    $('<button type="button">Pause</button>').click(element.pause).appendTo(element);
    element.wavesurfer.on('audioprocess', function () {
        time_update()
    });
    element.wavesurfer.on('audioprocess', function () {
        var duration = element.wavesurfer.getDuration()
        on_ready(duration)
    });

""", url=url, on_time_update=on_time_update, on_ready=on_ready)

display(slider)

widget