# Sketch working in Editor by not on hosted website :(
**URL:** https://discourse.processing.org/t/sketch-working-in-editor-by-not-on-hosted-website/42679
**Category:** Libraries
**Created:** [August 30, 2023, 4:38pm UTC](https://discourse.processing.org/t/sketch-working-in-editor-by-not-on-hosted-website/42679 "2023-08-30T16:38:41Z")
**Posts on this page:** 2
**Page:** 1
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…
> **[p5.js Web Editor](https://editor.p5js.org/calfish/sketches/QxB7DboKY)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
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](http://calfish.land/Fountain/index.html)
Any help is very very appreciated!
Thank you
```
```
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);
}
---