Distorted sound when loading multiple MP3s

p5.js Libraries
1

Hi all,

I’m trying to make an interface that crossfades between audio files depending on mouse position. The thing is, the sound is sounding terrible - like it’s being time stretched or something. Any ideas why this might be?

https://editor.p5js.org/twin_tone/sketches/rlsD8i6oN

I tried a simple sketch that loads the same files and it seems to be playing back normally. I realize that the sounds are pretty dodgy to begin with - field recordings made with phones - but they shouldn’t sound as bad as they do.

https://editor.p5js.org/twin_tone/sketches/9JxcUAygj

Thanks!

2

I adapted the code from a Processing sketch, which works well, but I only realized that the minim library won’t run on the web after I’d finished. Is it even possible to run 30 audio files simultaneously from a browser??? Or should I just accept that this is a bad idea and link to the Processing app instead?

3

– i see no use to run 30 sounds same time

– also why at beginning you play every sound double ( by play() AND loop() )

– the concept for your program is to adjust the volume ?of all 30 ? sounds 60 times per sec.
better not this way…

please make a new version of your program and try first
( without all the fancy volume /mouse distance code )

-a-
all file from setup:
x.loop();
x.pause();

-b- on mousePressed use like

function mysong( go ) {
  if ( go && !song.isLooping() ) song.loop();
  if ( !go && song.isLooping() ) song.pause();
}

later you can build in a

fade (in / out )

over it again

4

Thanks, I’ll take a look at this. The reason for having them all playing at the same time is that I figured they wouldn’t load quickly enough as the mouse rolls over each vector. Also, they need to be synchronized, so I don’t think pausing or stopping them if they’re not active will work.

5

but like on my RPI i can’t even preload more as 6 files…

so after you get that running you can try to
step 2
make that loop / pause logic by a mouse distance / circle
what might mean overlapping possible

fading would be step 3

i try a simple volume mouse slider and it works fine
https://editor.p5js.org/kll/sketches/JBJClAVCA


function mouseVolume() {
   if ( song.isLooping() ) {
     fill(200);
     triangle(10,height-10, width-10,height-30,width-10,height-10);
     
     let amp = map(mouseX, 0, width,0,1);
     fill(200,0,0);
     rect( amp*width,height-30,5,20);
     //print(amp);
     masterVolume(amp);
   }
}