Sound loading/ index.html error

p5.js Libraries
1

I am having an issue getting my canvas to load when I am using the preload function with a sound. The code is producing a output that just says “Loading…” I think this is an issue with my index.html, but I’ve been trying to fix it on my own with no luck.

let sound;
function preload(){
   play=loadSound("ADHD project1sound2")
}

function setup() {
  let cnv = createCanvas(100, 100);
  cnv.mousePressed(canvasPressed);
  background(220);
  text('tap here to play', 10, 20);
  play=loadSound("ADHD project1sound2")
  sound.play()
}

function canvasPressed(){
  sound.play();
}

<!DOCTYPE html>
<html lang="en">
  <head src="path/to/p5.sound.js">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
2

I suspect you’re missing a file extension (.mp3, etc.) on your audio file path:

let sound;
function preload(){
   sound = loadSound("ADHD project1sound2.mp3");
   ...

Also, if you’re running the page without a web server (opening the HTML file directly in your browser), you’ll encounter a CORS error.

1 Like
3

if the .mp3 is added I receive this error code: “Uncaught TypeError: Cannot read property ‘play’ of undefined (sketch: line 12)”

4

Did you change play to sound?

   ...
   //play = loadSound("ADHD project1sound2.mp3");
   sound = loadSound("ADHD project1sound2.mp3");
   ...
5

omg you are the best thank you so much!!! Of course it was the dumb error that got me:)