Problem playing one sound and then other

p5.js Libraries
#1

Hello, im trying to implement pacman in p5.js.
But im facing the problem that when i loose a game I play a song, a mp3 file… and then when i restart the game it should play initial sound/song.
So im facing that the two sounds are overlapping.
Is there any way to play sound one song/sound when the other finish ?

myLooseGameSound.play();
myStartSound.play();

I tried:

myLooseGameSound.play();
while (myLooseGameSound.isplaying())
{
}
myStartSound.play();

But got stuck, and dont know why…

Thanks in advance.

#2

do you want to share the sketch you are working on? you can do so with the web editor.

In JavaScript timing is sometimes funny. You need to use callback functions (efficient but maybe less intuitive) or check if the sound is finished in the draw loop (easy). The callback option is explained here
https://p5js.org/reference/#/p5.SoundFile/addCue

#3

Sure:
https://editor.p5js.org/ejgutierrez74/sketches/kJqSEtqQg

The full project is here: GitHub - SinkorAzon/ProjectePacMan

The relevant code is to play sound when they test if the player have win, if player wins, sounds a music of win, and then as restartGame…they reset canvas, fillmap with images, and sounds and initial sound…

Something similar is when player looses. A sound of losing game and then restart game. Actually we want a initial sound, before beginning every game, and is overlapped with the losing sound and wining sound.

A very dirty solution would be to join the two mp3 in a bigger one, so it would play the loose or win sound + initial game sound.

If it doesnt exist could be interesting some treatment of more than one song…some parameter in play, that if the song doesnt finish, p5 could not advance to the following line of code.

If you need any more information id kindly try to help.

Thanks for your effort and time.

#4

Thanks for the sketch but can you make it runnable so other people can test it? Ideally you should make a small sketch that only has the sequential sound play part without other game logic. I know you also posted the complete repository, but you will have a better chance of someone trying your sketch if it’s runnable on the web editor!

And did you see my comment about addCue function? I’m sure this provides what you are looking for.

#5

Id try this afternoon, it could be a solution, but i dont know why:
myloosegame.play();
mystartsound.play();
didnt work as expected… and also why
while ( myloosinggame.isplaying() ) doesnt work either…

Id try also to post a light version, but i put the full version in order people could test it…

Thanks

#6

Here is a more summarize code:
https://editor.p5js.org/ejgutierrez74/sketches/3mphMVyXu

I think that its a bug or something with p5.js and play function…perhpaps also with isPlaying()

Thanks

#7

thanks! but what I meant is not only to make the code smaller, but to make it runnable on the web editor so we can easily test. We are all volunteers and if you ask a question with a small example that everyone can try easily, you will have a higher chance of someone solving your issue. If you upload a code that requires someone to tidy up and upload own samples, you are asking more work from them and you will have less chance to get a meaningful reply.

So I made a sketch from scratch to show how to play two files sequentially
https://editor.p5js.org/micuat/sketches/bTotDJ-Zj

The problem with addCue is that if you specify the actual duration of the sample, it seems it won’t fire it so I subtracted the duration with a small number. This is not an elegant solution. I added as a comment that you can instead use setTimeout. This is a javascript function that you can set the timing to fire a function, and this may be better. I hope this helps!

#8

Thanks a lot, it worked !!
So i dont know if you are a developer of p5.js, but this should be documented. In my opinion as said before, p5.js should made the operations so that:
song1.play();
song2.play();
restartGame();

You played song1 and then song2 and then restartGame().

Thanks again

#9

you’re welcome. I’m not a “developer” but I do contribute to p5.js and definitely this is a confusing part of JavaScript that has to be documented.

Since everything is “asynchronous” in JavaScript except special cases, JavaScript won’t wait till song1.play() is ended or not, and goes on to the next operation. setTimeout or addCue postpones the operation, and this is the “natural” way of coding in JavaScript. This is actually useful if you get used to it. What you suggested can be problematic in some cases - imagine you want to do some operations between song1.play() and song2.play().

1 Like
#10

Yes, but i dont understand why:

song1.play();
while ( song1.isPlaying()){
//do nothing
}
song2.play();

should work, but firefox and chrome got stuck…

#11

I know this is a frustrating part of JavaScript. But explaining it is out of the scope of the original topic, so I will give you a pointer to the coding train:

1 Like