Loading Large Sound Files- problem with loading SOLVED!

p5.js Libraries
1

I am having problems loading a large sound file. It is too large to be uploaded directly to the P5js editor.
I have tried linking it to my dropbox, this has failed.
I have tried both load sound, and new p5.SoundFile (ensuring the index code has the library link included).
The drop box link is correct. My internet is running very fast. I have tried the code in both Chrome and Firefox. Both times it failed.

The error I receive is

There was no response from the server at https://www.dropbox.com/preview/mySong.mp3. Check the url and internet connectivity.

Code below-it is just to test getting a file loaded so very basic

type or paste code here
```let song;

// function preload(){
//   song = loadSound('https://www.dropbox.com/preview/mySong.mp3');
    
// } 
new p5.SoundFile('https://www.dropbox.com/preview/mySong.mp3')
function setup() {
  createCanvas(720, 200);
  background(255, 0, 0);
}

function mousePressed() {
  if (song.isPlaying()) {
    // .isPlaying() returns a boolean
    song.stop();
    background(255, 0, 0);
  } else {
    song.play();
    background(0, 255, 0);
  }
}

Help in solving this problem would be greatly appreciated!
1 Like
2

The idex code just to make sure```
type or paste code here

<script src="path/to/p5.sound.js"></script>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/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>
3

Hello @Kris1,

That Dropbox URL (https://www.dropbox.com/preview/mySong.mp3) looks suspicious to me. :slight_smile: URL:s for sharing contains some kind of user identifier usually. Looking like this:

https://dl.dropboxusercontent.com/s/b0a7xhsu4o06wkx/Abba%20Mani%20Abba%20Mani.mp3

1 Like
4

Ahh…Thank you, @Sven.
I tried the share link so https://www.dropbox.com/s/ei01e2vmt1f3pxi/mySong.mp3?dl=0

Unfortunately, it still fails.

index file as above new code `
let song;

// function preload(){
// song = loadSound(‘https://www.dropbox.com/s/ei01e2vmt1f3pxi/mySong.mp3?dl=0’);

// }
new p5.SoundFile(‘https://www.dropbox.com/s/ei01e2vmt1f3pxi/mySong.mp3?dl=0’)
function setup() {
createCanvas(720, 200);
background(255, 0, 0);
}

function mousePressed() {
if (song.isPlaying()) {
// .isPlaying() returns a boolean
song.stop();
background(255, 0, 0);
} else {
song.play();
background(0, 255, 0);
}

}

Screenshot 2020-05-28 at 19.11.09
Screenshot 2020-05-28 at 19.11.09781×137 29.3 KB

link to sketch

`Still stuck I am afraid.

1 Like
5

You’re one step closer, at least. :blush: That URL points to a web page, not an mp3 file. What you want is probably: https://dl.dropboxusercontent.com/s/ei01e2vmt1f3pxi/mySong.mp3.

3 Likes
6

@Sven is correct …

let song,
  AudioIsLoaded = false,
  col = {
    play: null,
    stop: null
  };

song = new p5.SoundFile('https://dl.dropboxusercontent.com/s/ei01e2vmt1f3pxi/mySong.mp3', _ => {
  console.log(`${song.url.substring(song.url.lastIndexOf('/')+1)} is loaded`);
  AudioIsLoaded = true;
});


setup = _ => {
  createCanvas(720, 200);
  col = {
    play: color(0, 200, 0),
    stop: color(200, 0, 0)
  }

  background(col.stop);
}

mousePressed = _ => {
  (!song.isPlaying() && AudioIsLoaded) ? (song.play(), background(col.play)) : (song.stop(), background(col.stop));
}
2 Likes
7

Wow!!! Thank you! It works! Now I will spend time to fully understand this code. I appreciate your help and work on this subject!

1 Like
8

Thank you so much to both @Sven and @slow_izzm :smiley:

1 Like