Hi all, I’m trying to build an online multiplayer board game using Bubble, but I’m having a hard time figuring out how to make every user stay on the same page in real-time. There is audio involved as well, where I will be playing a recorded audio, so everyone needs to hear the audio at the same time.
Any thoughts on how to make this happen?
@luminrabbit @andrewjohnson56782 @eazycode @multicorn @ZeroqodeSupport @J805 @vladislav.shulm @kahlenda1999 @anders.eidergard @ch.kr.lee
That is one hell of a random group of folks you tagged. 2 of them haven’t been seen in the forum for 5 years, 1 of them hasn’t been seen for almost 3 years, and 1 of them hasn’t been seen for 6 months. You obviously don’t have to answer this question, but I am insanely curious… how did you come up with that group of people?
And you just edited the post to include someone who also hasn’t been seen in the forum for 5 years and who literally posted 1 time.
I’m really just looking through posts that have similar questions. Most of these people are in posts that are trying to create multi-player environment. I see names like socket.io & TogetherJS being floated around here, will be investigating into them.
Also found this piano thing where I can see live actions of other users “Multiplayer Piano Bots”
Cool… thanks for humoring my curiosity… it will be interesting to see if any of them come back from the dead to respond.
By the way, I’m not exactly sure what you mean by keeping everyone on the same page, but it seems like a game should be a thing in your app, and maybe you could have an active game field on the User data type that stores a game (or a players field on the game data type that stores a list of players), and you could use that field to keep users on a particular page by redirecting them to that page if they try to navigate away or by hiding anything that would let them navigate away when a game is in progress.
Anyway, just some food for thought there.
Right now I’ve created a option set in the database, with options like Round 1, Round 2, Round 3 etc…so I can change the User’s progress based on which round we are on. However, I will be playing audio throughout the game, and I need the user to hear the audio at the same time as others.
So it wouldn’t work if I set a workflow to “play audio when user progress is Round 1” because the user could refresh the page, and will have to listen to the audio again. I want it to be real-time and in sync between players.
Are you looking at joined date? Maybe I can’t see what you are seeing. Where does it say last active date? Just curious. 
@J805… well, the list of folks was changed significantly with the second edit (although, it’s still an equally random group of folks, with some of them not having been around for quite some time), so my initial reply is not as valid. That being said, do you not see the Seen date when you look at someone’s profile? That’s the last date the person was active in the forum.
Yeah. I don’t get to see a seen date. 
That makes more sense.
Oh, if I click inside their profile I can see the seen date. 
I haven’t tried this so I can’t confirm it would work, but I would think anything you want to have that isn’t depending on page load should just be done as a backend workflow.
Choose when and how the players’ combined actions trigger the start of the music playing workflow, and how their combined actions end it, and you’d ensure they’d all be hearing the same music at the same time as long as they’re in your app.
That makes sense but I’m pretty sure if someone refreshes the page they will be cut off from the audio, and the audio will replay itself again given the condition is satisfied, which defeats the purpose.
I guess what I’m looking for is if there’s a way to play the audio at the page level, rather than the individual user level. Is there a way to mimic a conference call (but with recorded audio), where everything is being delivered at the page level, and who ever joins the page will just hear whatever is being played in the conference call at the moment.
Hmm. You can try to save the time marker every few seconds so then if they need to refresh the page they won’t be too far behind if you resume the audio. Just an idea. I will keep thinking about it though. If a better idea comes to mind, I will let you know.
Maybe an API might work. Look around for something that might work. Maybe something like this: High-Performing Live Audio Streaming API | Live Streaming API and SDK
Also, as an idea.
You can save the time when you start the audio. Then if the user need to refresh the page you can calculate how many seconds has passed since it started and resume the audio. That way it won’t restart. Would that help?
This Plugin looks promising and the documentation for it.
Along with autoplay this may be achievable?
I tried with bubbles plugin but failed… they have a Start at (seconds) which is cool but not enough timeline features.
Sorry I couldn’t be of more help.
Streaming the audio will never play at the exact same
time due to latency. The users will always be a few ms off unless the audio is predownloaded and played based on the current time.
I am not sure how you have set up the fields but as mentioned you can store the start date of the audio, or even put it a few seconds in advance and then start it with a workflow based on the start time and a time element that looks at the current time.
Thanks to all the comments, I will be testing out playing the audio based on time passed, see if it will work as suggested by @simosmik and @J805.
Iotum looks interesting, will be trying out Daily first since its as plugins within Bubble, hopefully it can deliver similar results.
Also on the issue of preloading audio, does anyone know how to do it effectively? I’ve tried “stopping the audio at page load”, but am not sure of the efficacy. I also found a few threads (audio - How to preload a sound in Javascript? - Stack Overflow & html - Preload multiple audio files - Stack Overflow & javascript - js / html5 audio: Why is canplaythrough not fired on iOS safari? - Stack Overflow) talking about preloading audio by running JS, but I have 0 experience. It will be helpful if anyone can help me with the script to pre-load multiple audio files at page load:
var audio = new Audio(‘url’);
audio.oncanplaythrough = isAppLoaded;
Ultimately I would say that Bubble is not the best platform for that.
If this is just for fun, I’d use tabletop simulator from Steam. Makes it really easy to demo and play games with friends, even in VR, from just simple images that you design. I made one in about 2 hours from our board game assets that our designer made.
If you want it to be more like a website itself instead of game on steam, there are many low-code builders for games specifically that do a much better job. I put 1000’s of hours into gamemaker back in the day and it was much easier than Bubble for this. Make 2D Games With GameMaker | Free Video Game Maker
This topic was automatically closed after 70 days. New replies are no longer allowed.
