Looper.js | Audio looper in pure JavaScript | Audio Utils library

I'm using A-Frame and A-Frame template-component.
I use template-component to load templates from <script id="..."> tag like in example.

I want to change the template on the fly using the el.setAttribute analogically like in this example.

My template contains a <sky> element with video as a source.
I can load one template and it works like a charm. I can pause, play it, and so on.

The issue appears when I want to switch the template to a new one that is using the same video resource, or load a new one and then return to the first one.

now I have 2 sounds - one without sync to the video.

One video is displayed but a second sound plays in the background. I also can verify that the sound is not coming from the displayed video. I can still play/pause it and its sound plays over the one in the background.

edited
I want to be able to modify not only the <sky> element but also some others, that's why I wanted to use the template-component. Let's also say that I don't know what assets would be finally used and I don't want to use an asset management system to load tens of Mb of videos/objects and others and suspend the user at a loading screen. As stated here:

The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

To clarify a little bit more my intention but still keeping it simple, I want the user to be able to change the scene by choosing a prefab (assuming 15Mb per video even with 6-7 assets it may almost reach 100Mb), or by uploading one. And I would really like to avoid reloading the page as it is not an elegant solution for the users perspective.

I think the old video is not disposed of entirely. I tried using the three.js .dispose() method on various elements/ materials/ video itself, but with no luck.
I also tried using <a-video> as a source, and also deleting the elements before switching, but with the same result.

• How to properly remove elements loaded by template so that the video is not stored/ cached anywhere?
• Can I somehow set the autoplay="false" or similar to <sky> video?
• If my approach is entirely wrong, can you point me in the right direction?