How do I clean up HTML5 Dom Elements after I am done with them?

I use Jupyter to listen to a large number of audio snippets and then categorize them. It worked fine until recently. I think something changed in Chrome. Now after listening to maybe 40 or 50 snippets the HTML5 audio player stops playing more snippets. When I look in Chrome developer tools console I see a message saying that I have reached a limit of the number of audio players I can running at any one point in time. I would be happy to clean up old audio players after I have listened to their snippets, but I don’t know how to get a handle to the element in the DOM.

Here is an example of what I am doing now:

from IPython.display import Audio, display

i = 0
for snipfile_local in list_of_snips:
    i += 1
    elem_id = 'aud_file_'+str(i)
    display(Audio(filename=snipfile_local,element_id=elem_id))
    choice = input('Enter a, b, or c:')
    # do something based on choice 

    # remove old audio player from DOM - Need to figure out how to call this
    #var element = document.getElementById(elem_id);
    #element.parentNode.removeChild(element);

Did you try calling display(... , clear=True)? That’s a relatively new option in IPython, but it might do the job for you…

@fperez Thanks very much for the tip. Unfortunately, I use Sagemaker and their notebooks run ‘7.16.1’.

On the plus side, I did not know about clear_output(). I learned about it by following your link. It works fine and meets my needs.

Thanks very much for the help!

2 Likes

Glad it helped! In fact I started my reply with clear_output(), but in the process of checking a few things, I learned about the new clear=True flag to display, which I actually wasn’t aware of!

You can see in the PR that the motivation for it was precisely to aid in discoverability and to reduce the needed import boilerplate for such a common use case. But your solution is solid, and you can always update to the newer version in the future as SageMaker catches up with IPython versions.

2 Likes