I have the following code to open a player on my website for audio playback using Django:

{% if track.file.hls_stream %}
  <a type="button" class="btn btn-outline-primary" href="{% url 'stream' pk=track.file.pk|safe|cypher_link_stream %}" target="_blank"><i class="fad fa-play-circle"></i></a>
...

Currently this opens a new tab and uses VideoJS to play the HLS stream. But actually this is not what I want. I would like to hit the play button, and a audio player pop's up at the bottom of the page and stays there while navigating on the site. I already searched for such a solution but didn't had that much luck. Can someone maybe give me a hint where to look at?

Thanks in advance.

CodePudding user response：

It's a bit difficult to say without knowing a bit more about your tech stack. However, off the top of my head, I feel the most common approach with this kind of problem is to build the site as a SPA (Single Page Application) using one of the popular frontend frameworks like React, Vue, or Angular.

By building a SPA, you can navigate between page routes "virtually", where new data can be retrieved and mounted to the DOM while having other unchanged elements (like your music player) persist between changes.

To accomplish this with Vue, you would use to move between pages without refreshing. See here for details