play markers continuosly from an audio file

[pasqhulk]

Hello everyone, sorry if this topic was discussed already, I couldn't find anything about it on the forum.
 
I am relatively new to javascript and phaser, a hand would be great:
 
I am trying to create a "music game" and I am looking for the best solution to play markers continuously from an audio file.

 

here is part of my code:

      function onCreate() {	    console.log("onCreate")	    music = game.add.audio('music');	    music.allowMultiple = false;	    music.addMarker('lvl1_1',0,1);	    music.addMarker('lvl1_2',1,1);	    music.addMarker('lvl1_3',2,1);	    music.addMarker('lvl1_4',3,1);	    music.addMarker('lvl1_5',4,1);	    music.addMarker('lvl1_6',5,1);	    music.addMarker('lvl1_7',6,1);	    music.addMarker('lvl1_8',7,1);	    music.addMarker('lvl1_9',8,1);[...]

function playclicked(){							for (var i = 1; i <= maxvalue; i++){				music.play("lvl"+level.number+"_"+i);				while(music.isPlaying){console.log(music.isPlaying);}    			}      }  

in few words, the loop should be able to play the first marker, wait for it to complete and then play the next marker, and so on.

The while loop won't get past the !music.isPlaying condition, maybe I am doing something wrong there..?

The loop should also be clean enough to make the markers transition smooth, cause I am playing a song.

 

also I am using game.load.audio(...) and not game.load.audiosprite(...) ; I previously used an audiosprite with json but I am not sure how to call out properties such isPlaying while working with it.. if someone could be so kind to explain how that works, I'd appreciate!

 

thank you very much!!

[pasqhulk]

I realized i am not really facilitating any help.. so i created a a JSFiddle.

 

http://jsfiddle.net/8n7toqt0/2/

 

hopefully it will be easier to get help! thanks

[stupot]

Hi,

 

There's various problems here, not so obvious to a newbie. The two main problems that you'll need to address are:

 

1. You have to wait for the sound to decode (after loading) before you'll hear anything.

2. You can't hang around in a loop playing sounds, your code should be re-entrant, probably best to set a call back function that is triggered on a sound ending to play the next sound.  Currently your loop is probably whizzing through trying to play all the sounds because it never sees music.isPlaying set to true - and if it ever did see it set to true you'd have a different problem.

 

But it's worth preparing yourself for disappointment if you are hoping for smooth seamless laggless audio playback of sound snippets. Audio just doesn't behave the same in all browsers and devices, some are much worse than others.

[pasqhulk]

thank you for helping stupot. I have been trying following your direction and i came up with this 

http://jsfiddle.net/8n7toqt0/6/ 

the transition is good enough, but other problems came up.. 

 

- the game pretty much freezes during the execution of the function , i'd like to have the option of stopping this or at least ignore all the user's input during the loop, cause right now once the loop finishes the game plays them all at once (like if you click the button while sound is playing)

- i'd really like the function to callback on audio.onStop instead on a fixed time range (which is now 1 seconds)

 

any idea or solution would be appreciated! thanks all!

[stupot]

In the new fiddle, you're still trying to do all processing/waiting in a single function 'playmarks', you'll need to fix that.

 

Also on entry to playmarks() I think your testing of 'mark' isn't what you intended, I think you should be testing against 'undefined' and setting a default value for mark, like this:

    if (typeof mark == 'undefined') {        mark=1;    }

Look to the Phaser audio examples for inspiration.  If you want to detect a sound ending then look how it's done here:

 

    http://phaser.io/examples/v2/audio/sound-complete

 

 

If you just want to kickoff another sound after a specific time then look into using setTimeout().

[pasqhulk]

Hi stupot, thank you again for your directions. I think i cracked it: http://jsfiddle.net/8n7toqt0/10/

looks good to me, what you think? 

I guess my only question now would be: how do i achieve the same results with audiosprites? i don't know how to use  audio.onStop.add while working with game.load.audiosprite instead of game.load.audio.

For example i can't test isPlaying if i am using audiosprites. Is there something i am missing?

thanks a lot again, i like the result.

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

EDIT:

this is what i am talking about..

 

http://jsfiddle.net/8n7toqt0/12/ 

 

when i use this.game.load.audiosprite('music', 'http://examples.phaser.io/assets/audio/bodenstaendig_2000_in_rock_4bit.ogg' null, audioJSON); 

and then try to use audio.onStop.add(this.soundStopped, this);

it gives me TypeError: Cannot read property 'add' of undefined {}

 

what is the right way to call out phaser.sound functions while working with audiosprites with jsons..? thanks!

[stupot]

Yup, you cracked it.

 

I'm not too familiar with the Phaser audio interface, but I think that by manualy adding the markers, you have achieved what an audiosprite does under the hood anyway.  You get a 'sound instance' reference back from play(), use that to test 'isPlaying', it's the same whether you play a sound or an audiosprite.

 

Check the docs for all the properties and methods to play with:

 

http://phaser.io/docs/2.4.3/Phaser.Sound.html

[stupot]

Ok, I see what you mean.

 

The error is saying 'undefined' doesn't have an 'add' property, in this case when it says 'undefined' it is talking about 'audio.onStop', thus 'audio' which is an audiosprite doesn't have an 'onStop' property - check the docs and this is correct, it doesn't.

 

but when we play an audiosprite we get a sound instance reference and that does have an onStop property, so

 

1. remove the broken line of code trying to do audio.onStop.add()

2. in playmarks(), add an onStop callback to the sound instance returned from the play function.

 

I've modded the fiddle here.  You also had the parameters wrong for the play call, they're different for an audiosprite.  My mods are tagged with 'stumod'

 

There's some other problems, like you are still trying to play 10 sounds with only 6 defined, but this gets you passed your main problem.

[pasqhulk]

awesome! easy fix for the 6 sounds defined ahah: http://jsfiddle.net/rmah016j/4/

 

i'll mark your post as the solution! thank you very much again! 

 

(last last question: why the game.sound.setDecodedCallback doesn't work anymore? isn't the sound manager independent from the type of audio?)

[stupot]

Yeah, I did notice that too, maybe I edited something and broke it, or maybe it's a little different for audiosprites, I think you'll sort it out.  Fiddle is a little funny sometimes because your app starts off unfocused so you have to click it's window to give it the focus to get Phaser to un-pause.

 

Anytime pasqhulk and welcome to Phaser.