Как найти элемент, которого нет в DOM?

Question

[Jacket]

На случайной странице есть audio, который был создан через конструктор.

var player = new Audio('file.mp3');
player.play();

console.log(player); // [object HTMLAudioElement]
console.log(document.querySelector('audio')); // null

Пример - https://jsfiddle.net/f2zd4rqs/

У меня нет ссылки на условный player, мне нужно его найти через консоль/из вне.
Я не понимаю где находится player, созданный таким образом: его нет в документе, но он играет.
Как его найти? Как остановить воспроизведение?

Answer 1

[Дима Паутов]

В DOM никак, т.к. это не тег audio, а web audio api.

Comments

[Jacket]

В консоли он отображается как обычный audio тег.
Как получить на него ссылку? Как с ним взаимодействовать?

[Дима Паутов]

Jacket, это скрытый элемент. Взаимодействовать с ним можно через переменную player, которую вы создали. С ней и работайте

[Jacket]

Дима Турков, в этом и суть вопроса - я сразу указал, что у меня нет ссылки, тег создается не мной, в вопросе просто пример.

Ну или окау, другой вариант: после начала воспроизведения ссылка была удалена.

var player = new Audio('file.mp3');
player.play();
player = null;

Но звук при этом все еще играет. Как тогда его искать?

[Дима Паутов]

Jacket,

Если все ссылки на аудиоэлемент, созданные с помощью конструктора Audio() удалены, сам элемент не будет удален из памяти механизмом сборщика мусора JavaScript, если в данный момент идет воспроизведение. Вместо этого продолжится воспроизведение и объект останется в памяти до тех пор, пока не закончится аудио или оно не будет приостановлено (например, путем вызова pause()). В этот момент объект подлежит уничтожению сборщиком мусора.

Как найти? Да никак, только обратится к переменной! Нет такого механизма, в котором видно все используемые конструкторы из языка в данный момент и что бы к ним можно было обратится.

Answer 2

[Tim]

Добавьте в dom аудио document.body.append(player ), а затем вызывайте с document.querySelector('audio')