# P5 - Starting out music website - accessing mp3s correctly

**URL:** <https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102>\
**Category:** Libraries\
**Created:** [November 1, 2019, 8:21am UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102 "2019-11-01T08:21:20Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 1, 2019, 8:21am UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102/1 "2019-11-01T08:21:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 5, 2019, 5:43pm UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102/2 "2019-11-05T17:43:04Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 7, 2019, 2:03am UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102/3 "2019-11-07T02:03:54Z")

</div>

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!!!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 7, 2019, 2:15am UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102/4 "2019-11-07T02:15:28Z")

</div>

> [@byxx](#):
>
> server for a public website

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.

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 7, 2019, 3:21am UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102/5 "2019-11-07T03:21:32Z")

</div>

hey kll,

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

best  
bx

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 7, 2019, 3:26am UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102/6 "2019-11-07T03:26:10Z")

</div>

thanks, and link here please?

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 10, 2019, 4:26pm UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102/7 "2019-11-10T16:26:06Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 11, 2019, 9:05am UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102/8 "2019-11-11T09:05:20Z")

</div>

> [@byxx](#):
>
> Can I access a mp3-file in the online p5 editor

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

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/2MvxRROjH)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

 ![p5js_sound_mp3_upload](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/efdefd05e19229853b560d0c06ad731e9a74d8dd.png)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 11, 2019, 2:54pm UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102/9 "2019-11-11T14:54:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 11, 2019, 4:33pm UTC](https://discourse.processing.org/t/p5-starting-out-music-website-accessing-mp3s-correctly/15102/10 "2019-11-11T16:33:37Z")

</div>

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!!