# Distorted sound when loading multiple MP3s

**URL:** <https://discourse.processing.org/t/distorted-sound-when-loading-multiple-mp3s/17178>\
**Category:** Libraries\
**Created:** [January 19, 2020, 2:13am UTC](https://discourse.processing.org/t/distorted-sound-when-loading-multiple-mp3s/17178 "2020-01-19T02:13:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![twin\_tone](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@twin\_tone](https://discourse.processing.org/u/twin_tone)\
**Post date:** [January 19, 2020, 2:13am UTC](https://discourse.processing.org/t/distorted-sound-when-loading-multiple-mp3s/17178/1 "2020-01-19T02:13:08Z")

</div>

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](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](https://editor.p5js.org/twin_tone/sketches/9JxcUAygj)

Thanks!

---

<div class="post-metadata">

**Author:** ![twin\_tone](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@twin\_tone](https://discourse.processing.org/u/twin_tone)\
**Post date:** [January 19, 2020, 2:15am UTC](https://discourse.processing.org/t/distorted-sound-when-loading-multiple-mp3s/17178/2 "2020-01-19T02:15:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 19, 2020, 2:35am UTC](https://discourse.processing.org/t/distorted-sound-when-loading-multiple-mp3s/17178/3 "2020-01-19T02:35:44Z")

</div>

– i see no use to run 30 sounds same time

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

> **[reference | p5.js](https://p5js.org/reference/#/libraries/p5.sound)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

– 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

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

```

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/NIwFX54Gk)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

* * *

later you can build in a

> fade (in / out )

over it again

---

<div class="post-metadata">

**Author:** ![twin\_tone](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@twin\_tone](https://discourse.processing.org/u/twin_tone)\
**Post date:** [January 19, 2020, 3:01am UTC](https://discourse.processing.org/t/distorted-sound-when-loading-multiple-mp3s/17178/4 "2020-01-19T03:01:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 19, 2020, 3:05am UTC](https://discourse.processing.org/t/distorted-sound-when-loading-multiple-mp3s/17178/5 "2020-01-19T03:05:31Z")

</div>

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](https://editor.p5js.org/kll/sketches/JBJClAVCA)

```auto

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);
   }
}

```