Mp3 jukebox in background

In like this 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.

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.

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!

Yes I mean to play 3 songs in a row and how do I it. Can you show me that.

Well, look at the SoundFile reference. How could you know that a song has stopped, so you could start playing the next one?

  1. you could decide to start the next one based on the previous sound’s duration
  2. you could check the sound with isPlaying, and if it isn’t, start the next sound
  3. you could use onended to schedule the next sound when isPlaying becomes false.
  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

There may be other ways. Study the examples and choose the best option for you!

1 Like

I do not know how to do so that each song plays in succession. Can you show me how to do it with codes.

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.

1 Like

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.

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.

How do I do to get started this in the background and not with any button


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

function draw() {}

function fadeTrack(tid, time) {
	console.log("fading: " + tid);
	audio[tid].setVolume(0, time);
	setTimeout(function() {
	}, (time*1000)+250);

function playTrack(tid, volume, time) {
	console.log("playing: " + tid);
	if( !audio[tid].isPlaying() ) {
			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 );	

If you want to activate code without using an input, you call it explicitly either in setup() (once) or in draw() (once per frame).

Can you show how I do it in the code and how I start it up.

Well, assuming the rest of your code is already working and that keypress already triggers tracks correctly, then something like:

function setup(){
  createCanvas( windowWidth, windowHeight );
  playTrack( 0, .3, 5 ); // start the first track when the sketch starts


function draw(){
    playTrack( 0, .3, 5 ); // start the first track when the sketch starts