Sketch works locally on server but when deployed failed load resources

p5.js Coding Questions
1

It looks like when I preview my project on the server it runs as expected, but I begin running into issues when I am trying to view it deployed on github pages.

I have tried multiple browsers, and the page is stuck on loading.
The console shows that it is failing to load resources pointing to my .WAV file.

Any-help would be greatly appreciated.


image(2)
image(2)1536Ă—1056 138 KB
// INDEX 

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
<!--
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.min.js"></script> -->

  <script language="javascript" src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/addons/p5.sound.min.js"></script>
     <script type="text/javascript" src="sketch.js"></script>
  <title>p5.js example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>

</head>

<body>
  <main>
  </main>
</body>
</html>

----------------------------------------------------------------------------------------------------
// Sketch

`var song;
var slider
var sliderRate
var sliderPan;
var button;
var jumpButton;
let myFont;
let graphics;
var angle = 45;
let bg;
let y = 0;

function preload() {
  song = loadSound("audio/SPACE.wav");
  song.setVolume(0.9);
  embryo = loadImage('assets/Embryo.jpg');
  embryo2 = loadImage('assets/embryo3.jpg');
  embryo3 = loadImage('assets/Embryo-2.gif');
  mitosis = loadImage('assets/mitosis.jpg');
  warnings = loadImage('assets/warningt.jpg');
  dna = loadImage('assets/dna.gif');
  bg = loadImage('assets/warningt.jpg');
  myFont = loadFont('assets/BarlowCondensed-BlackItalic.otf');


}
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  tint(0, 153, 204, 126);
  background(51, 20, 20);
   graphics = createGraphics(200,200);
   graphics.fill(255);
   graphics.textAlign(CENTER);
   graphics.textSize(14);
   graphics.background(0);
   graphics.textFont(myFont);
   graphics.text('CLICK TO START',150,150);
  amp = new p5.Amplitude();
}

function draw() {
  background(255);
  var vol = amp.getLevel();
  var diam = map(vol, 0, 1, mouseY/2, 550);
  fill(20);
  texture(graphics);

  if (vol > .010) {
    fill(255);
    texture(embryo);
    var diam = map(vol, mouseY/2, 1, mouseY/2, 550);

  }
  if (vol > .030) {
    fill(255);
    texture(embryo2);
      var diam = map(vol, 0, 1, mouseY/2, 550);
      angle +=0;;
  }
  if (vol > .040) {
    fill(40);
    texture(embryo2);
    val =2;
  }
  if (vol > .050) {
    ambientLight(255, 50, 0);
    ambientMaterial(250);
        background(255,0,0);
    fill(250);
    texture(mitosis);
  }
  if (vol > .060) {

    fill(250);
    ambientLight(255, 250, 0);
    texture(warnings);
    background(255,255,0);
    angle +=21;
  }
  if (vol > .070) {
    texture(embryo);
    background(255);
    angle +=0201;
    val = 1;
  }
let dirY = (mouseY / height - 0.5) *4;
let dirX = (mouseX / width - 0.5) *5;
directionalLight(0, 0, 0, dirX, -dirY, 1.5);
rotateX(angle*-.15);
rotateY(angle * 01);
rotateZ(angle * 0.12);
sphere(diam);
angle +=0.005;
}

function mouseClicked() {
  togglePlaying();
}

function togglePlaying() {
  if (!song.isPlaying()) {
    song.play();
    song.setVolume(0.3);
  } else {
    song.pause();
  }

}
`
`
2

Hi,

Welcome to the community! :slight_smile:

I’ve never used GitHub pages but did you put all your video files on the server? (in /embryo/audio/*)
If yes, are you sure they are accessible from the server and served as static files?

3

Hi Josephh,
Thanks for the open arms and response! :slight_smile:
All my audio files are under elijahsEmbryo/audio/
Yes the audio file is static, and they all the files are on the repo.

I am not too sure what you mean by accessibility from the server.
They have been accessible locally.

4

Hi again!

I mean on web servers, you can specify permissions for files, you can tell if a certain file or folder will be accessible to everyone or to certain ip addresses…

But I suggest that github pages does it automatically for you, again I don’t know how it’s managing your files.

However, trying to download it with wget for example gives me a 404 error :

$ wget https://michaelrodriguez23.github.io/embryo/audio/SPACE.wav
--2020-11-19 01:14:52--  https://michaelrodriguez23.github.io/embryo/audio/SPACE.wav
Résolution de michaelrodriguez23.github.io (michaelrodriguez23.github.io)… 185.199.111.153, 185.199.109.153, 185.199.110.153, ...
Connexion à michaelrodriguez23.github.io (michaelrodriguez23.github.io)|185.199.111.153|:443… connecté.
requête HTTP transmise, en attente de la réponse… 404 Not Found
2020-11-19 01:14:52 erreur 404 : Not Found.

But it works for your other images. Double check that it’s the right filename and that the files are in the right folder.

Actually I get this for the requests :

Capture d’écran de 2020-11-19 01-17-44
Capture d’écran de 2020-11-19 01-17-441594×542 137 KB

5

Thanks Joseph for your help, I learned a couple things about debugging within the network console.
What it ended up being was that I had double clicked the audio file within my IDE, and it has tried converting to text. Pretty much uncoding the file making it unloadable.

1 Like