Mp3 jukebox in background

p5.js Libraries
1

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

2

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!

3

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

4

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

  1. you could decide to start the next one based on the previous sound’s 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
  3. you could use onended to schedule the next sound when isPlaying becomes false. 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

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

1 Like
5

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

6

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
7

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.

8

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.

9

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

sketch.js

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

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

11

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

12

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
}

or:

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