Accessing the javascript widget models in JupyterLab

I would like to be able to access the javascript widget models in a notebook.

Using Classic Jupyter Notebook, I can access these models using:

%%javascript
var manager = IPython.WidgetManager._manager[0];

Is there an equivalent command in JupyterLab? (I have installed @jupyterlab-manager)

[b-trav]

I would like to be able to access the currentTime of an HTML5 audio element in my python code. I can currently access this in a Classic Jupyter Notebook. Getting it to work in JupyterLab is proving more difficult.

Executing the following cell in Classic Jupyter works as expected.

from ipywidgets import IntSlider, ToggleButton, Text
from IPython.display import display, Audio, Javascript
import soundfile as sf
import numpy as np

duration = 20

t = Text(value='0',
         description='Elapsed Time:',
         style = {'description_width': 'initial'},
        )

s = IntSlider(max=duration,
              description='Elapsed Time:',
              style = {'description_width': 'initial'},
             )

frequency = 2000;
samplerate = 10000
data = np.sin(2*np.pi*frequency*np.power(np.arange(duration*samplerate)/samplerate,2))
sf.write('temp.flac', data, samplerate)

a = Audio('temp.flac',
          autoplay=True,
          element_id = 'audio_element',
         )

display(a,t,s)

jscript = f'''
var time_check;
var stop_checking = false;
function updateTime() {{
    var audio_element = document.getElementById("audio_element");
    var manager = window.IPython.WidgetManager._managers[0];
    
    if (audio_element == null) {{
        clearTimeout(time_check);
        return;
    }}
    
    // Change value only once after pausing
    if ((!audio_element.paused) || (!stop_checking)) {{
        if (audio_element.paused) stop_checking = true;
        else stop_checking = false;
        var model_prom = manager.get_model('{t.model_id}');
        model_prom.then(function(model) {{
            model.set('value', "" + audio_element.currentTime);
            model.save_changes();
            }});
            var model_prom = manager.get_model('{s.model_id}');
            model_prom.then(function(model) {{
                model.set('value', Math.floor(audio_element.currentTime));
                model.save_changes();
            }});
    }}//endif
    time_check = setTimeout(updateTime, 1000);
}}
updateTime();
'''
Javascript(jscript)

I’d be delighted if there was a simpler method to keep a Slider widget in sync with the time played in an audio element.

BTW I have just discovered that ipywidgets also has an Audio element, but believe that it would behave similar to the IPython.display Audio element, and the IPython.display Audio element can set an element_id, which is handy.

Thanks for your work on these widgets. They are most useful, and help to make Python/JupyterLab a very powerful scientific toolbox.

[b-trav]

@saraswathykrk , I am unaware of any changes since I posted this issue, which means the code above works in Classic Notebook (which is accessible from Jupyterlab via the Help Menu), but does not work in Jupyterlab.