Hello,
I have a sketch that is working well in the editor but won’t work on my site after I download it.
I have been troubleshooting a bunch but have had no luck. I want to use sound assets larger than 5mb which is why it is very important for me to have the sketch hosted on my own site!
here is the editor link…
my website link which is blank, inspect element reveals a bunch of errors I don’t know how to address.
I tried putting locally hosted p5 libraries in place of the cloudfare link too but that didn’t seem to work.
http://calfish.land/Fountain/index.html
Any help is very very appreciated!
Thank you
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="fountainstyle.css">
<meta charset="utf-8" />
let song;
var x = 50;
var y = 180;
var speed = 2;
function preload() {
img = loadImage(“fountainassets/bell.png”);
img2 = loadImage(“fountainassets/drop.png”);
img3 = loadImage(“fountainassets/wave.png”);
}
function setup() {
song = loadSound(“fountainassets/fountainex.mp3”);
song2 = loadSound(“fountainassets/drop.mp3”);
song3 = loadSound(“fountainassets/wave.mp3”);
createCanvas(100, 500);
background(0, 0, 0);
createCanvas(800, 500);
background(255, 0, 0);
}
function mousePressed() {
if (mouseX > 150 && mouseX < 250 && mouseY > 50 && mouseY < 250)
if (song.isPlaying()) {
// .isPlaying() returns a boolean
song.stop();
background(255, 0, 0);
} else {
song.play();
background(x, 155, 0);
}
if (mouseX > 350 && mouseX < 450 && mouseY > 50 && mouseY < 250)
if (song2.isPlaying()) {
// .isPlaying() returns a boolean
song2.stop();
background(255, 0, 0);
} else {
song2.play();
background(x, 155, 0);
}
if (mouseX > 550 && mouseX < 650 && mouseY > 50 && mouseY < 250)
if (song3.isPlaying()) {
// .isPlaying() returns a boolean
song3.stop();
background(255, 0, 0);
} else {
song3.play();
background(x, 155, 0);
}
}
function draw() {
r = map(x, 0, 600, 0, 255);
b = map(x, 0, 600, 255, 0);
w = map(y, 0, 600, 255, 0);
background(r, w, b);
stroke(x - 170);
strokeWeight(1);
noFill();
ellipse(x, y, 100, 100);
if (x > width - 50 || x < 50) {
speed = speed * -1;
}
x = x + speed;
ellipse(200, 100, 100, 100);
image(img, 150, 50, 100, 100);
ellipse(400, 100, 100, 100);
image(img2, 350, 50, 100, 100);
ellipse(600, 100, 100, 100);
image(img3, 550, 50, 100, 100);
}