Implementing an MP3 queue feature

[jwtsmithson]

I’m looking to implement a queue feature where users can add items to a queue that play through an audio player.

I have the audio player plugin functioning however I can’t figure out how to implement the queue. Does anyone have any knowledge regarding this?

Cheers,
Johnny

[AndyMountHood]

I’m new to Bubble but have some coding background. From what little I know of Bubble so far, three simple options come to mind. Pick an idea you like and test it and see if I’m right or wrong. The simplest thing is just to create a list of (audio) files. (The files are actually stored elsewhere; the list is actually a list of URL pointers to the files. If you delete an item off the list, it could orphan the file and cause your allotted server space to fill up unnecessarily. So, make sure you learn the proper procedure to delete files in Bubble. Alternatively, when the MP3 files are uploaded, upload them all to a data type. Put the queue lists in another data type and copy the URL’s to the list as the user adds them to their queue.) The first item in the list is the first MP3 file that the user added. As more files are added, they are added to the list. As the queue is played, it starts from the top of the list and iterates down to the bottom.

Your second option is to have a data type which is the queue. One field is (the URL to) the file, the next is the Unique ID of the previous item/thing (blank if it’s the first item in the queue), and the third is the Unique ID of the next queued item (blank if it’s the last item). This option falls under the “data structures and algorithms” side of coding and won’t suit everyone. But if it intrigues you, try it.

Your third option is to have the queue be a data type with the file as one field and it’s order number as the second (1st, 2nd, etc.). I don’t know what your workflows would have to be like for this.

Yours is not the first question about queues in this forum, and the others weren’t answered either. A Bubble content provider (YouTuber, etc.) ought to make one or two videos on this topic someday. I’m bookmarking any “need help” question I answer and will come back later to try out my suggestions myself. Who knows, maybe I’ll be that content provider someday. Ideally, an experienced Bubble developer can correct my errors or provide more information and advice.

[GH5T]

Creating a queue system like this within Bubble could be heavy on performance.

What I have done in the past is created a class in Javascript, and apply that to the window. I could pop & push objects/sources into a queue. This is something I have implemented in my own private audio player plugin.

Here is a reference:

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// Expected output: "tomato"

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage"]

If you’re looking for a custom solution I could be of service. Let me know if you don’t find any other solutions.

I believe there are plugins that can handle this, but I’m not sure. I created my own so I could clone SoundClouds audio player that plays even when a user changes their page. It even produces waveforms and has a track needle.