I’ve been dabbling with the “preload audio” flow function for an app I’m building and it seems as though the feature is extremely slow, even when I start the preloading with the page mounting (i.e., well before clicking the play button). For context, it’s taking upwards of 8-10 seconds to preload, which is an eternity when you’re waiting for an item to load.
Is there any way to make the preloading flow function faster? Or is the speed a result of previewing the app vs fully launching the app? Currently, I’m previewing my app on the SAP Appgyver app for iOS.
Curious if anyone else has had similar issues or has come up with a workaround for better performance.
How big is the file you are preloading? I’ve found preloading to be pretty quick, but this could be because of file size
As far as I know, there’s no way around this. I would recommend trying to preload earlier in the process somehow – like, in extreme case I would make the variable you preload the audio to an app variable and have the preloading on global canvas, and trigger it already when that page where you want to play the audio is navigated to.
Hi Mevi, thanks for getting back to me.
All the audio files I’m using are between 20-30Mb. To be honest, I’ve tried them before on Bubble without any issues so it didn’t even cross my mind that they might be too large. I’ll test out the preload speed with a smaller file size and see how that goes.
As for preloading the files earlier, I’ve tried preloading the audio immediately after the “page mounted” event (so before any component tap happens), but as I’m creating an audio streaming app, there’s a limit to how early I can preload the audio. For example, when an audio ends and another needs to begin right after. Or if one audio is already playing, and a user clicks on a new audio file to play.
There is one thing I was curious about - is it possible to preload multiple audio files?
Thanks again for your info.
You can preload multiple audio files, so long as each has their own playback id. I’ve used that to preload multiple audio files at once, so the users only have to wait in the very beginning before the first audio for the preloading.
Our platform hasn’t been that focused on audio capabilities, but hopefully the hassle that has caused will ease as well with our upcoming introduction of the possibility to integrate third party plugins.
That is great to know. Preloading multiple audio files might be a good temporary solution.
The only issue I could see arising from this method is the fact that it can’t be used dynamically for my use case. For example, some of the pages in my app have 12 audio files, others have 50+, others have other amounts (user playlists, etc). So in order for this to work, a flow function would have to be built that can work in both situations. Short of having 50+ “preload audio” flow functions in the logic, I’m not really sure I have a solution. I considered for a second looping the preload audio flow function (so 50 of them wouldn’t be needed) but then the audio is loading sequentially instead of simultaneously, which would still cause slow loading times.
Is it possible to simultaneously preload an array of audio files from one “preload audio” flow function?
I guess to clarify; is it possible to have one “preload audio” logic component preload multiple audio files, or can loading multiple audio files only happen with multiple “preload audio” logic components.
The preload audio flow function only takes one file at a time so you’ll have to preload every audio separately, but you can use looping logic for this. In an upcoming simple audio player component, I have done the logic like this:
I had thought about looping the preload function as well, but I wanted to avoid having each preload step happen one after the other since the time it would take to load every audio file would compound. In my current use case, each audio file takes roughly 5-10 seconds to preload, and an average page with audio files on my app has 12-15 audio files. If each audio file loads sequentially, it would take almost 2 minutes to load everything on the page.
I also tested running multiple preload audio flow functions at the same time, but it seems each one can only load one at a time? I set a test variable to change when the audio is loaded, and it seems as though they always go in order: the first preload flow function gets loaded, then the second, then the third. Unfortunately, this would yield the same results as the looping function (in terms of wait time).
I do have 2 questions though.
- Out of curiosity, how large are the audio files you’re testing with? I did try preloading with smaller files, and it does load faster, but at the cost of substantial audio quality loss.
- Would the preload function run better out of preview mode once the app is fully launched? Or is the speed in the SAP Appgyver app more or less a perfect rendition of how it will operate once it’s launched?
Apologies for all the questions. I do appreciate all the help you’ve provided me so far.
Ah, that’s a shame that it still works sequentially. It would have been a good workaround for your issue But do all of the files really need to be loaded when the user opens the page? That is, do the audios play in order or is the user supposed to be able to click any audio immediately when the page opens, or how? I don’t know what type of an app you’re making, but e.g. in meditation apps, only the one audio is loaded even though several may be available on the same page, and then if the user selects a different length / different voice, the app takes a moment to load again.
- I haven’t really done a lot of testing with audios, the file I have tested with was 2,6MB.
- Well, the app is usually faster out of preview mode, but I don’t know if that applies to audio preloading
I’m making an audio streaming app, so both scenarios (the audios playing in order, and the ability for the user to click any audio immediately when the page opens) would need to be possible. The ideal situation is the page loads, and all the audios are available to be clicked and played with little to no delay. Once one of the audios has begun, the app will autoplay the next audio in the list of audios until all the audios have been played. Kind of like how Spotify operates.
It seems like I’ll have to test different ways to compress the audio files as the solution if there’s no way to get the audio to load faster from Appgyver’s end.
One final question: do you know if loading files is faster on web than mobile? I’m curious because whenever I tested audio players on website builders they seemed to have no issue with delay, but it’s only with mobile builders that the delay seems to come up.
Hmm. I see. Audio streaming app isn’t our core, and streaming apps usually rely on smoothness of experience and audio quality, so I don’t know if we’re the best platform for your app idea, at least for now. However, you could have a look at React Native plugins for audio streaming players and perhaps use one of them once our third party plugin support is out?
I haven’t tried if preloading is faster on web than mobile, but I would assume that it depends a little on the device and its performance how quick or slow it is
Hmm, that is a shame to hear. Especially since I built out the majority of the app already haha.
Any idea when the third-party plugin support will be released?
Ah sorry my answer is super late.
As for third-party plugin support… We do have versions of it in internal testing, but after the first round it looks like there’s still a lot of work to be done before we will be able to release a version of it to be publicly available. Because of that, I don’t feel confident in giving an estimate right now – it looks like my previous knowledge of “before end of year” is proving to be wrong I recommend following the tracker ticket here.
Thanks for the update though. I’ll be sure to keep on eye on the ticker.
@addae.nurse , @Mevi
Hello! I stumbled upon this post as I am also trying to build an app that can stream audio. I am still very new to this but trying to learn and I see you touched on some of my concerns. I’m building out my app and learning as much as possible but am worried the platform may not be able to do what I need.
Sorry to bug you but I was hoping you might be able to give me some insight. If this isn’t appropriate just let me know and I’ll start my own thread (or private message?)!
Does your app use firebase? I have gone through the tutorials and have the authorization and database portions set up nicely but I cannot get appgyver to play mp3 files from firebase storage. For example I can get this mp3 file to stream as expected https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3 but I cannot get anything from firebase to play, even when trying to download and cache the file.
Do you know if multiple audio files can be simultaneously played? I’m worried that this function won’t be possible or might not trigger audio files at the same time (I need them to be properly synced up).
Thank you for your time, any help would be greatly appreciated!
No worries, glad to help if I can.
I don’t use firebase for my backend because for my use case I need a SQL database for my backend, and Firebase is a NoSQL (document) database. So I won’t be much help with specific firebase-related issues. I’m not sure if you’re storing your audio files on firebase, but I also didn’t store my audio files in my backend database. Instead, I store them in AWS and link to them from my database. You might have user restrictions for certain files enabled on firebase if the issue only happens when you’re trying to access the file directly from firebase.
You actually can play multiple audio files at the same time, but I’m not sure if you’d want to do that as both audio files will play over each other and you’d be listening to a blend of the two. Maybe that is what you want though. I came across the ability to do this accidentally, but I imagine if you’d want to start both audio files at the same time you’d just have to set up two separate audio flow functions in the backend that start from one button/source.
Thank you for the quick response! I will need to investigate the differences between SQL vs NoSQL databases and see which one makes more sense for my project! AWS might be a better solution for storing/retrieving my audio files so I will take a look at that option. I would want the audio files to play over each other and am in a similar situation where I need multiple files that are a few mb each to be loaded at once. The user would then select the appropriate tracks to be layered over each other. Hopefully as I progress and learn with this prototype appgyver releases the third party options so we can have more robust options!
Yeah, I would recommend doing a quick search on SQL vs NoSQL to find out which one best matches your needs. For myself, I already had loads of data in table-based databases and I wanted flexibility with the data, so an SQL database worked best.
If you are looking to have both the audio files play over each other then you can certainly achieve this with two separate play audio functions that both stem from the same button or initiating action.
In terms of your audio files being multiple MB, I still haven’t found a fool-proof method for instantaneously playing audio files larger than 2-3MB. Because of that, I’d recommend preloading as many audio files as possible when the page is opened/focused to try and limit the loading time. The biggest thing that will minimize loading time though is lowering the audio file size. I was able to lower mine about 6x before the loss of quality became noticeable, so I’d focus on that first. It’s still slow in my opinion, but that’s because I wasn’t able to get all my files below the 1-2MB threshold. If you can get your files below 1MB you should be fine for loading times.
Like you said though, hopefully with the release of third-party integration we can get better audio loading and playback.
@bstine did you ever find a solution? I am current trying to load audio file from an external path (on firebase storage as well as other locations for testing)… I’m able to retrieve from firebase documents the path to the file i want to play…
I am trying to preload from the url and then play the audio (one scenario test using the url you referenced - https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3)
Also getting errors such as
undefined is not an object (evaluating 'p.match') when i try to do the same preload>play with an audio file i have in firebase storage i am seeing
the operation couldn't be completed. (OSStatus error -10875)
I have never been able to get it to load at all. I’ve been using play audio from url and it loads almost instantly. I think this is another one of those things in appgyver that just does not work.