How can I access an HTMLAudioElement that is currently playing, without knowing anything about it? It is not an <audio> tag in the page, it is a

audio_element = document.createElement('audio');

But now (at the time when I want the audio to pause) the DOM has been modified by a

$('#details').html('').load(ajax_loader, "id=" + id, function() {
    <!-- another playlist -->
}

And I can't seem to retrieve my audio element back. It's no longer in the DOM, but the audio is still playing witch is fine BTW, but now I want to play something else. And when I do, I can hear both audio files.

So really my question is just that : How can I access an HTMLAudioElement that is currently playing, without knowing anything about it?

How can I access an HTMLAudioElement that is currently playing, without knowing anything about it? It is not an <audio> tag in the page, it is a

audio_element = document.createElement('audio');

But now (at the time when I want the audio to pause) the DOM has been modified by a

$('#details').html('').load(ajax_loader, "id=" + id, function() {
    <!-- another playlist -->
}

And I can't seem to retrieve my audio element back. It's no longer in the DOM, but the audio is still playing witch is fine BTW, but now I want to play something else. And when I do, I can hear both audio files.

So really my question is just that : How can I access an HTMLAudioElement that is currently playing, without knowing anything about it?

• javascript
• jquery
• html
• dom
• audio

• Could it be as simple as changing to $('#details').html('').load(... ? If not I think you would need to expand you example with more code/an example – Alex K. Commented Jan 23, 2015 at 12:55
• What do you think about document.all? It is a pseudoarray of all elements in the DOM. Then you can pay attention to paused property of the HTMLAudioElement. – Alexey Sh. Commented Jan 23, 2015 at 13:00
• You are right, my pseudo-code was not "functional", sorry. And no, an example would be too plex to produce, it is not my code, and it spans across multiple files, hence the "theoretical" take of my question : Can I, say, scan the DOM at a given point and get the reference of the audio playing, or can I not (witch bewilders me : Where is this audio now ? Has the browser passed it to the OS and really lost all track of it!?) – yPhil Commented Jan 23, 2015 at 13:00

2 Answers 2

If you keep a reference to the audio element when you create it, you can still access the audio element via that reference and then clear the reference to have it garbage collected. So a simple example using global variables (not good practice but you can modify this to work in your module) is:

window.audio_element = document.createElement('audio');

and then later

window.audio_element.pause();
window.audio_element = undefined;

Here is a reference to the mozilla documentation https://developer.mozilla/en-US/docs/Web/HTML/Element/audio and the WhatWG specification https://developers.whatwg/the-video-element.html#the-video-element

You can't get access to element without reference to it.

So in that case you have two ways:

• insert the audio element inside the DOM document.body.appendChild(document.createElement('audio')) and make it hidden by css display: none; and then you can use get access by document.getElementsByTagName('audio')
• save reference to audio element in some scope: window.audioElement = document.createElement('audio')

Thanks