Vue3, vue-router, how to keep unused view mounted, with audio playback (more than keep-alive)? - vue-router

Question

I want to use vue-router, but then keep a currently unused view mounted in the DOM. Something like Vue's keep-alive but with just hiding the unused view, instead of unmounting it.
The reason is, this view has an audio player in it, and I want to keep it playing. On unmount, it's stopping. Here's how it looks currently:
<!-- To keep the audio within the media player component running,
simply keep all components alive over route changes -->
<router-view v-slot="{ Component }">
<keep-alive include="Play">
<component :is="Component" />
</keep-alive>
</router-view>
I would like to replace the keep-alive with something like keep-mounted (but hidden). How can I do that?
Notes:
Of course I already have tried using Vue's keep-alive, as suggested here: https://stackoverflow.com/a/66297873/79485, and it's working as advertised. However, It's not enough, I need to keep the component mounted, not just kept in memory.
I have found https://github.com/Akryum/vue-router-multi-view, but this is vue2 only.

Answer 1

I have found a solution for the specific problem at hand, being the interrupted audio playback. As suggested by #Thomas I have placed the audio element completely out of the DOM, using the Web Audio API.
Here's how I create the audio context with the element, right at component creation:
data: () => ({
//...
/** The audio context to use
audioContext: new AudioContext({
latencyHint: 'interactive',
}),
audioElement: document.createElement('audio'),
}),
I never add the audio element to the DOM, but use it with the received element handle as usual:
/** Handles the setup of the audio graph outside the mounted lifespan.
* #devdoc The audio element is intentionally not added to the DOM, to keep it unaffected of unmounts during vue-router route changes.
*/
created() {
this.audioElement.src = this.src;
//.....
},
With this, although the VueJs3 view gets lifted from the DOM with keep-alive, the audio is unaffected of this.
I then subsequently destroy the audio context and the audio element at the unmounted() lifecycle event.
This works very well. You may review the complete code at https://github.com/suterma/replayer-pwa/blob/a5acd8dc3b5a277bca6d9baf9459fb70eea2e1a5/src/components/TrackAudioApiPlayer.vue