Difficulties in starting out with p5.sound.js

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.


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() {

function setup() {
  createCanvas(256, 256);
  fft = new p5.FFT(0.9, 128);

I still don’t understand why the errors persist.

1 Like

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 )

for Chrome could try

add CORS

firefox use “CORS Everywhere”

1 Like

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:


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.