Play music continuously when navigating pages

I’m using new Audio() play() javascript function in Django template. Audio file stops playing when I navigate to another page. In Laravel livewire, you can wrap your audio player html in persist block and it will let audio play continuously. Is there any similar solution in Django?

Welcome @m4800 !

Laravel livewire works by not loading new pages. It performs partial page updates based on AJAX requests made by JavaScript code loaded in the page.

You can create your Django app to do the same. You can either write your own “partial page” update code, or you can use HTMX to create the same effect.

1 Like

Hello @KenWhitesell , thanks for your response. What do you mean by partial page update? do you mean when user clicks on a navigation link, I should update page’s content by using JavaScript template literal? that’s doable but it’s going to create a lot of messy JavaScript codes. Is there any popular library that can do this for me? should I create pages using React? and add react bundle JS code on Django? I’m not sure about this solution because when user needs to authentication on Django app, page must refresh and then the audio will stop.

Not quite. The technique uses JavaScript code to issue the request for the portion of the page to be updated (for example, a <div>), and then injects the HTML that was received (again, perhaps a <div>) into the page.

You could. That’s one solution.

or:

That’s my preferred option in these situations.

1 Like

@KenWhitesell so the backend should send HTML content as a response. That’s interesting. Can I authenticate users on Django without a page refresh? and how can you deal with URL routing in that case? page URLs won’t update if you do that

Yes, that’s how both Laravel livewire and HTMX work.

I don’t see why not. (Meaning, I’ve never done it myself, but I’m not aware of anything that would fundamentally prevent it from working.)

I’m not sure I understand what you’re asking about here. In this type of environment, there is no “routing” per se. You’re on a page, and actions you take on the page will request some HTML to be returned to update that page. You’re never changing pages.

1 Like

Well, I’ll be required to change browser’s URL as well. In that case, what should I do? each page should get its own URL. Maybe then building a React.js frontend will be better I guess.

  • Music playback should not stop
  • Page should udpate
  • Browser’s URL should update as well

Maybe the only thing that can suffice these requirements is React.js frontend running on port 3000 talking to Django REST backend

I still don’t understand what you think the issue is.

When you’re doing a partial page update, it’s not a new page. Everything exists on one page. React works the same way - it’s not changing pages. There’s not “each page” - everything is on one page, hence the name, “Single Page App” (SPA).

The requests being made by JavaScript (raw, Laravel livewire, HTMX, React, Angular, jQuery, etc, etc, etc) issue HTTP requests in the background. They don’t affect the browser’s url. Those requests get routed by the back end the same way that any other request gets router. That those requests are being made by JavaScript code is irrelevent.

If you look at any SPA, you’ll see that the page URL doesn’t change, unless the SPA itself is changing it for its own purposes. (But that’s a stylistic issue, not a technical issue.) For example, if you use GMail, you’ll see that they augment the url with a query variable.

1 Like

React router allows you to change browser URL in the way you want. I think that’s what I need in this case. Then SPA will continue to play music, page content will update and browser’s URL will change as well. It’s very unfortunate that Django can’t support this. I hope someone can create a library that will support all three so that a persisted component won’t be destroyed and page URL will still update.

For example, I have urls such as /product1, /about, /contact, /product3, etc
Each time user navigates to a different page, browser’s URL should change accordingly. This is also a better practice for SEO because you need to index the pages on search engines.
And the page’s content should update & music playback shouldn’t break.

Again, you’re missing the point of an SPA. When you update a partial page, you are not navigating to a new page. Those partial page fragments are not complete pages to be referenced directly.

Now, regardless of the above, you can change the url on the browser bar with your JavaScript code, if you believe it provides you with any benefit at all.

Note that this is true regardless of the backend framework you choose. Technically speaking, neither Django, nor any other backend framework has any control over the browser’s address bar. The contents of that bar are solely under the control of the browser and the JavaScript running in it. (e.g., HTMX has a directive to set that value.)

(I might suggest you do some reading on the HTTP protocol, and learn why what you’re asking for is physically impossible for the way you’re asking for it to be done.)