I am needing assistance, because I don’t know if this is even possible. My current thinking is no, no it’s not.
I am working on a website for a radio station I started (find our release forum post here!) and for the entire site, we’ve done a single-page app. This was so as the user navigated, they could listen to the radio uninterrupted. However, a bit of a challenge has come up that I just can not solve without help. In fact, I truly think it just won’t be possible with Bubble, but I am hoping someone can prove me wrong.
I wanted to setup an articles section, so I could bring on board some content writers, and have engaging articles for my listeners to read while they listened. I setup the entire system, paid for an awesome plugin for article writing, shoutout to “Modern Rich Text Editor (Editor.js)” for that, however when my users click an article, it is now an actual page change, and thus lose connection from the media player.
Now, here are some solutions I thought of:
Maintain a single page, and open articles on this single page.
My issue with this solution is that one, it’s not SEO friendly. Secondly, I can’t use the page slugs as easily. Thirdly, I hate that the url would then be url.com/index/article/article-name-slug
Get over it, and just make people lose connection
Really don’t like this idea either. My whole hope was to maintain the radio session while browsing the entire site.
tl;dr
Can I have an audio element maintain play status during page changes? I don’t believe so, but I am hoping someone has a good idea.
Just for documenting this in case anyone else wants to do this:
The only way I have found so far, is not possible with Bubble sadly.
Essentially, it’s having a master HTML file that iFrames the site, thus not actually every “reloading” a page, but using pushState. I’m assuming this is kinda what Bubble does when you go to an internal page that is the same page.
I’m considering trying this out, and iFraming the Bubble site. Might give it a shot, I don’t know.
My biggest issue with this is just that the URL becomes very ugly, and I’m trying to maintain readable URLs.
If I did that, then the URLs would be something along the lines of: /index/article/article-slug which I am trying to avoid.
Although, this all seems mute now, as I just loaded my website, and it seems Bubble may have changed the way they are handling internal page changes to the same page. Now, it seems as if my audio player is being paused even with change pages to the same page.
Need to reach out to Bubble support about this, because this is breaking. Luckily auto-play still works, but it’s still pausing as users browse now.
Yes, all in the SPA right now. The only seperate page I have is for articles. Now, I did learn of this cool little Javascript code: window.history.pushState("object or string", "Title", "/about");
Might have to play around with this, and then do some customizing on the 404 page in case a user actually tries to use the URL directly.
"Page is loaded and path is /about then go to page index, path of about, and then add another pushstate.
Seems kinda hacky, but it seems to be the best case scenario, assuming I can solve why the page is actually refreshing on the SPA.
If you have a floating group banner or something like that, it’s always visible. Try running the audio through that, since that isn’t a “page”. Even a 1px x 1px floating group would likely work.
Yeah we do, we have a reusable element header, and come to think of it, I think this issue may have started as we turned the header into a reusable. Will have to test that theory out.
It doesn’t even have to be a floating one, as it doesn’t need to be visually in sight, as long as it’s visible on the page.
It was working fine 2 or 3 days ago, it just broke within the past day or so. It’s almost as if it is re-rendering the page completely now, thus acting like a page refresh. Going to do some more playing around. Getting strange behavior…
You are right, it does need to be on a section of the page that never changes though. In my app I just having floating groups that are constant, so that was my thought.
I’ve deduced the current issue to my audio player being affected by the latest update.
I have a cool animation when the player is played, and that animation doesn’t stop as the user browses the SPA. Just the audio pauses. That is a huge relief, as I can just look around for a new player.
This problem found. Now, back to the initial, about the article pages. I think I am going to just suck it up, and keep going as a SPA. Seems to be the best case scenario here.
