Add song to sketch in Processing p5-Mode

I am using Processing in p5 Mode. I added a songfile to my sketch via sketch-> add file (I hope that add file is the correct english translation).
The thing is I tried all various ways to make it work code wise (preload method, callback method) but microsoft edge just wont start the sketch. The page is just white and keeps saying loading… The console in the inspector says error"file not found".
I definitely did add the sound lib to the html file (and it´s working) and also tried and checked several times if I had the file name spelled correctly.
I think I need to add the file to my sketch in another way. It seems to me like the file actually isnt in the project… but no clue whats going on here.
Help will be much appreciated!

Hi,

my first advice would be to use Edge when you’re developping something. This browser isn’t a great one it is late comparing to others in implementation of the last JS/Css features. I recommend to use either Firefox or Chrome, but Brave or Opera should be good ones also.

If it says “file not found”, you have usually two options :

  • either your path is wrong. Then check the spelling of your file, the extension, the name of the folder, and the hierarchy in your folder
  • either the path is correct but the file is not in the current folder or in a child of this one, and then your browser cannot access to it (because of restrictions), so you have to move it inside your sketch folder
1 Like

I just took edge because it was automtically set to it. I tried multiple times to make firefox my standard but every time my computer updates it is reset and I keep forgetting -.- But thanks for the advice.
As for the second part pretty sure I spelled everything right, I checked for mistakes multiple times, even used multiple files in multiple formats… so that doesnt seem to be it.
Now to the import part:
I simply made it Sketch → import file and then chose the audio sample I wanted.
And it appeared in the projects “data” folder automatically. No idea if that is a good thing or not though. Where should it be located? Do I always have to give the path? If so, how do I exactly do that? Sadly all the refence for p5 is made for work with the web editor. Everything fine there. Do I in the processing IDE maybe have to include something in the html file? Don´t think so but I am running out of ideas haha

We love WIndows for these kin of behaviors :slight_smile: Forcing you to use its tools
Processing IDE always store the files you drag&drop or select via the dropdown menu into a data folder, so it’s fine.
If your structure is :

index.html
sketch.js
data/
    myfilename.mp3

you should have a path of this kind in your sketch :

let song = loadImage('./data/myfilename.mp3')

Is that what you have ?

1 Like

Good god that was it(correct file path). Thank you so much! I hate it when I try around forever simply because I forget the obvious haha
Are you on Mac? I got into coding a couple of months ago, audio programming to be precise… in frameworks like juce everything just seems to be set up for working with Macs… all the tutorials etc. And Macs seem to come with a lot of helpful setup and programs that are very nice to have.
I am actually considering to maybe get an extra mac just for coding haha

No, I have both a Linux distrib and a Windows on my PC. It’s true that a lot of front-end ressources are made on MacOS but because it is actually front-end, the OS doesn’t make big differences here. It’s another thing when you come to back-end setup.
JS libraries are interpreted by browsers, so you don’t really care about your OS, but the choice of you browser is important (give up Edge and Safari, worst ones), and even for most of the Processing lib you don’t really to care about it because they are compiled in Java.
Then if you’re using other frameworks such as MaxMSP or Pd I know only the basics so I can’t tell you but I don’t think it makes such a difference

1 Like

Ok definitely won´t use Edge anymore!
And thanks once more for your time and help!

1 Like