P5 - Starting out music website - accessing mp3s correctly

p5.js Libraries
1

Dear Community,

I would like to know if I can create a homepage with lots of mp3s in P5. I don´t know if its a good idea to incorporate a Data Bank like mysql or how I could access a data bank.

It is probable, that I change the mp3s from time to time, but the reference from the website shall stay the same…

THX for your help!!

Best regards
BX

1 Like
2

Have you already covered the basics of loading and playing sound in p5.js? I’d suggest starting with one song if you haven’t already:

https://www.google.com/search?q=p5.js+music

Then move to two or three songs. Once you have that, the simplest way to go to many songs is to put mp3 files in a directory, then a list of mp3 file names. That list could be stored directly in your sketch code, or it could be an external text file. No need for mysql or another database – unless you are hoping to store metadata alongside your music filenames and filter / sort the list by it, and even then you might want to just use simple tabular data like a csv file.

So, now you just need to update the text file or csv file with the song list. Keep in mind that this won’t update in a running browser tab until the tab is reloaded – unless you have the sketch code periodically reload the file resource to check for update.

3 Likes
3

THX!
so puttin mp3 files into a dedicated music folder beside the sketch file and upload that on a server for a public website etc. ?
will have a look on how to assign the mp3s in the code.
thx for your help!!!

1 Like
4

please note that there are local (country) and international regulations
for this services like: ? radio stations ? streaming platforms ?
need to be ? registered? and ? pay ?

to learn p5.js you also can do it

  • inside your LAN with a local server “mediaplayer” style
  • or choose a other subject as “music”
  • or make sure it’s your own music production?

OR ignore me.

2 Likes
5

hey kll,

you are very welcome!! thx
its my own music.

best
bx

2 Likes
6

thanks, and link here please?

7

@kII Sorry, but its not published yet. So, Nothing to really show here music wise, forgive me.
@jeremydouglass: found the sound tuts of coding train. Great!!

Also just figured out to write in the p5.js online editor here.

Stupid question:
Can I access a mp3-file in the online p5 editor?
My Guess: not really, as Dan is writing in a text editor with his sound files projects…

THX

8

yes, after you upload it manually first

-1- open example sound: preload sound
-2- duplicate
-3- save
-4- assets file add
drop from PC local file to drop field
-5- change filename to new / load
-6- start

p5js_sound_mp3_upload
p5js_sound_mp3_upload1261×653 26.7 KB

2 Likes
9

However, if you have dozens of mp3s that you want to host on your own site, the web editor isn’t the best place for that. it is really for testing with one or two songs.

2 Likes
10

Its just some stupid asking to get my head around, so I am very greatful for your commenting on the questions I have for the best workflows in p5 to get an idea where to start properly:

I would assume:

  • Building a website with tens to hundreds of mp3s only with using the dedicated project folder, adding the audio files here and upload that on my web site´s server as one bundle (index.html and all approppriate folders) holding all the content of the site.

  • Checking out a bit in the p5 online editor: Using one or two files to get into the programming with only a few audio files is okay there

  • Dedicated (external) Server for storing the media files seperately: Possible, but not the first choice. Better to stick to the media folder (loads of mp3s) inside the project folder
    …
    Will have to dig in a little more into your advised directions over the next time
    THX!!

1 Like