Been using Processing for a few years. I’ve made a sketch that loads an audio file and is a visualizer that starts when you click on it. I want to turn this into a portfolio webpage with more of these visualizer objects, but I am getting majorly stuck trying to adapt to p5js.
I can get audio in p5js through the online examples and such, but as far as my own audio I am lost. Not sure where to place files etc. Do they need to be on a server or on my local machine?
Also having lots of trouble trying to implement this audio visualizer as a class so I can have multiple of these “visualizer” objects on the page, with samples loaded and ready to be clicked on and played.
Is there a way to say “stream” and audio file from a site like soundcloud?
Another thought I had; is there any website “builder” ie squarespace, wix…that would allow me to somehow drop an exe. or similar of my original processing sketch?
It depends on whether you have a proper web server that can host your portfolio/website. If it’s the case, the sound file should be stored on that server.
Otherwise when you are developing a website you often do it locally on your machine because it’s easier. You could open your index.html file (it’s the common name for the entry file of your website) but then you have problems when you want to load content from folders… The solution is to use a local web server (you have IDE plugins for VSCode or Atom and you also have this very simple useful command if you have python installed : python3 -m http.server in the directory of your website)
This the basic structure of a simple website :
p5_website // The root directory of your website
├── css // Holding css files
│ └── style.css
├── index.html // The entry point to your website
├── js // Holding all js scripts
│ ├── lib // Holding js libraries (like p5)
│ │ └── p5.min.js
│ └── sketch.js // Your p5 sketch
└── media // All media files
├── img
└── sound
└── sound1.wav
6 directories, 5 files
