Difficulties in starting out with p5.sound.js

p5.js Libraries
1

So I’m recently starting out with p5.sound.js to make an audio visualizer. However, I find myself stuck at the very first step and I would really appreciate any help.

Errors:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

Access to XMLHttpRequest at ‘file:///Users/theonlyroy/Desktop/Repositories/audio-visualizer/tb.mp3’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Here’s the code snippet:


var song;
var fft;

function preload() {
  song = loadSound('tb.mp3');
}

function touchStarted() {
    getAudioContext().resume()
}

function setup() {
  createCanvas(256, 256);
  colorMode(HSB);
  angleMode(DEGREES);
  song.play();
  fft = new p5.FFT(0.9, 128);
}

I still don’t understand why the errors persist.

1 Like
2

do you run that under a server environment?

because just as a index.html in a pc directory and a double click not work for loading files…
( just some simple drawings… possible )

3

for Chrome could try

add CORS

firefox use “CORS Everywhere”

1 Like
4

By default, most browsers will not permit most Cross-Origin Resource Sharing (CORS) – like running a p5.js sketch from your desktop. Many past discussions:

https://discourse.processing.org/search?q=CORS%20policy

If you use PDE in p5.js mode, this will run your sketches through a local webserver, solving that problem.

Or you can use a Chrome plugin, or Firefox. Or the p5.js web editor, if that meets your needs.