P5.Js sketch used to work but now it doesn't

p5.js Libraries
1

The sketch below worked a year ago but now when I try to play it it just says loading indefinitely. Any thoughts on what the hangup is?

</var bgcolor;
var abutton;
var bbutton;
var cbutton;
var dbutton;
var ebutton;
var fbutton;

function preload () {
bsong = loadSound(“https://ia801401.us.archive.org/28/items/ME2020-09-15/magnolia2020-09-15d01t01.mp3”);
csong = loadSound(“https://ia601402.us.archive.org/24/items/ds2020-09-24/02%20My%20Baby’s%20Coming%20Back%20To%20Me.mp3”)
}

function setup() {
createCanvas(400, 400);
bgcolor = color (200, 140, 160);

let acol = color(255, 213, 120, 100);

abutton = createButton (“Button A”);
abutton.position(10, 10);
abutton.mousePressed(changeColor);
abutton.style(‘background-color’, acol);

let bcol = color(170, 123, 200, 100);

bbutton = createButton (“Button B”);
bbutton.position(150, 10);
bbutton.mousePressed(btogglePlaying);
bbutton.style(‘background-color’, bcol);

let ccol = color(230, 210, 200, 100);

cbutton = createButton (“Button C”);
cbutton.position(290, 10);
cbutton.mousePressed(ctogglePlaying);
cbutton.style(‘background-color’, ccol);

let dcol = color(240, 124, 160, 100)

dbutton = createButton (“Button D”);
dbutton.position(10, 50);
dbutton.mousePressed(changeColor);
dbutton.style(‘background-color’, dcol);

let ecol = color(230, 224, 110, 100)

ebutton = createButton (“Button E”);
ebutton.position(150, 50);
ebutton.mousePressed(changeColor);
ebutton.style(‘background-color’, ecol);

let fcol = color(160, 110, 160, 100)

fbutton = createButton (“Button F”);
fbutton.position(290, 50);
fbutton.mousePressed(changeColor);
fbutton.style(‘background-color’, fcol);

}

function changeColor() {
bgcolor = color(random(255), 140, 160);
}

function btogglePlaying () {

if (bsong.isPlaying()) {
bsong.stop();
bbutton.html(“Button B”);
}
else {
bsong.play();
bbutton.html(“Stop”);
}}

function ctogglePlaying () {

if (csong.isPlaying()) {
csong.stop();
cbutton.html(“Button C”);
}
else {
csong.play();
cbutton.html(“Stop”);
}}

function draw() {
background(bgcolor);

}

2
  1. When you post code in this forum please use the </> icon in the formatting bar which surrounds your code with lines containing ``` for proper formatting.
  2. This may be the result of not posting the code correctly, but your code appears to have special unicode “quotes” instead of standard ASCII quotes (', ")
  3. Always check the browsers JavaScript Console when a sketch is stuck loading
Access to XMLHttpRequest at 'https://ia801401.us.archive.org/28/items/ME2020-09-15/magnolia2020-09-15d01t01.mp3' from origin 'https://preview.p5js.org' has been blocked by CORS policy:
    No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'https://ia601402.us.archive.org/24/items/ds2020-09-24/02%20My%20Baby's%20Coming%20Back%20To%20Me.mp3' from origin 'https://preview.p5js.org' has been blocked by CORS policy:
    No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is happening because archive.org is not allowing cross origin requests for these resources. You can read about CORS here. You will need to download these items and store them somewhere that supports cross origin requests, or store them on the host that servers your webpage.

2 Likes
3

Thanks!
I am not sure I did the </> correctly. Also the quotes are correct in the original they just changed to unicode when I copy-pasted the code.