# Mp3 jukebox in background
**URL:** https://discourse.processing.org/t/mp3-jukebox-in-background/9843
**Category:** Libraries
**Created:** [April 1, 2019, 6:14pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843 "2019-04-01T18:14:10Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@peor](https://discourse.processing.org/u/peor)
#### Post date: [April 1, 2019, 6:14pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/1 "2019-04-01T18:14:10Z")
In like this [https://p5js.org/examples/sound-preload-soundfile.html](https://p5js.org/examples/sound-preload-soundfile.html) but then want a sequence of several mp3 files that are played one track where there are also fade in and fade out for each track. Can you help me how I creates that for me.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [April 5, 2019, 4:31pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/2 "2019-04-05T16:31:36Z")
> [@peor](#):
>
> a sequence of several mp3 files that are played one track where there are also fade in and fade out for each track
I’m not sure I know what you mean by “that are played one track.”
Do you mean you want to play 3 songs in a row – 1 crossfades to 2, 2 crossfades to 3?
Maybe start with a simpler problem: a single song that fades in and fades out. Check out setVolume with rampTime and timeFromNow.
> **[reference | p5.js](https://p5js.org/reference/#/p5.SoundFile/setVolume)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
After you have that, the next problem: add a second song that starts fading in when the first song fades out.
Then add as many songs as you want!
---
### Author:  [@peor](https://discourse.processing.org/u/peor)
#### Post date: [April 5, 2019, 8:02pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/3 "2019-04-05T20:02:18Z")
> [@jeremydouglass](#):
>
> to play 3 songs in a row
Yes I mean to play 3 songs in a row and how do I it. Can you show me that.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [April 5, 2019, 8:08pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/4 "2019-04-05T20:08:26Z")
Well, look at the SoundFile reference. How could you know that a song has stopped, so you could start playing the next one?
[https://p5js.org/reference/#/p5.SoundFile](https://p5js.org/reference/#/p5.SoundFile)
1. you could decide to start the next one based on the previous sound’s duration [https://p5js.org/reference/#/p5.SoundFile/duration](https://p5js.org/reference/#/p5.SoundFile/duration)
2. you could check the sound with isPlaying, and if it isn’t, start the next sound [https://p5js.org/reference/#/p5.SoundFile/isPlaying](https://p5js.org/reference/#/p5.SoundFile/isPlaying)
3. you could use onended to schedule the next sound when isPlaying becomes false. [https://p5js.org/reference/#/p5.SoundFile/onended](https://p5js.org/reference/#/p5.SoundFile/onended)
4. you could use addCue to begin playing the next song even _before_ the last song stops playing – this is probably what you want if you are trying to crossfade [https://p5js.org/reference/#/p5.SoundFile/addCue](https://p5js.org/reference/#/p5.SoundFile/addCue)
There may be other ways. Study the examples and choose the best option for you!
---
### Author:  [@peor](https://discourse.processing.org/u/peor)
#### Post date: [May 20, 2019, 6:02pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/5 "2019-05-20T18:02:01Z")
I do not know how to do so that each song plays in succession. Can you show me how to do it with codes.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [May 20, 2019, 6:18pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/6 "2019-05-20T18:18:46Z")
Why don’t you start by making a p5.js sketch that plays a single song. Post it here.
Then add an event that occurs when that single song ends – e.g. turn the canvas red, or draw a rectangle. You can detect the event using one of the methods I linked above, such as isPlaying. Post your code here once you have gotten started, and you can get help with the next step – instead of drawing a rectangle, start the next song.
---
### Author:  [@peor](https://discourse.processing.org/u/peor)
#### Post date: [May 21, 2019, 5:37pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/7 "2019-05-21T17:37:22Z")
Can you give me an example of how I play three songs track1.mp3, track2.mp3 and track3.mp3 in a row. I have this in the background in a slide show so the song should start at the same time as the slide show begins.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [May 21, 2019, 9:49pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/8 "2019-05-21T21:49:45Z")
Sorry. I have given you suggestions about how to start, and I will give you feedback on an example sketch, but I won’t write it for you.
Start with playing one song, then see my post above for next steps. Post your code here if you get stuck.
---
### Author:  [@peor](https://discourse.processing.org/u/peor)
#### Post date: [July 4, 2019, 5:52pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/9 "2019-07-04T17:52:58Z")
How do I do to get started this in the background and not with any button
sketch.js
```auto
var audio = [];
var numTracks = 4;
function preload() {
audio[0] = loadSound('/audio/001.mp3');
audio[1] = loadSound('/audio/002.mp3');
audio[2] = loadSound('/audio/003.mp3');
audio[3] = loadSound('/audio/004.mp3');
}
function setup() {
createCanvas( windowWidth, windowHeight );
noLoop();
}
function draw() {}
function fadeTrack(tid, time) {
console.log("fading: " + tid);
audio[tid].setVolume(0, time);
setTimeout(function() {
audio[tid].stop();
}, (time*1000)+250);
}
function playTrack(tid, volume, time) {
console.log("playing: " + tid);
if( !audio[tid].isPlaying() ) {
audio[tid].play();
audio[tid].setVolume(0);
setTimeout(function(){
audio[tid].setVolume(volume, time);
}, 100);
}
}
function keyPressed() {
var key = keyCode - 49;
if( key >= 0 && key < numTracks ) {
console.log( "key pressed: " + key );
for( var i = 0; i < numTracks; i++ ) {
if( i != key ) {
if( audio[i].isPlaying() ) {
fadeTrack( i, 2 );
}
}
}
if( !audio[key].isPlaying() ) {
playTrack( key, .3, 5 );
}
}
}
```
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [July 4, 2019, 11:00pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/10 "2019-07-04T23:00:31Z")
If you want to activate code without using an input, you call it explicitly either in setup() (once) or in draw() (once per frame).
---
### Author:  [@peor](https://discourse.processing.org/u/peor)
#### Post date: [July 5, 2019, 6:17pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/11 "2019-07-05T18:17:03Z")
Can you show how I do it in the code and how I start it up.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [July 5, 2019, 9:15pm UTC](https://discourse.processing.org/t/mp3-jukebox-in-background/9843/12 "2019-07-05T21:15:51Z")
Well, assuming the rest of your code is already working and that keypress already triggers tracks correctly, then something like:
```auto
function setup(){
createCanvas( windowWidth, windowHeight );
playTrack( 0, .3, 5 ); // start the first track when the sketch starts
}
```
or:
```auto
function draw(){
if(frameCount==1){
playTrack( 0, .3, 5 ); // start the first track when the sketch starts
}
}
```