Well as I promised @PirateJC a Playground for audio sprites. I don’t know how to do PRs, I just use github as my website
So here is the basic PG - tested with Windows10 and Firefox. Playground
Basically three bits of code : 1. A basic scene, 2. The sound preparation code, 3 Button code and functionality.
The audio file has 6 sounds that are defined by the “soundArray” variable that includes the start point in the the file for each sound and the length of the sound .The “isPlaying” variable is the flag to stop sounds being played on top of each other by repeated clicks on the buttons. The top button plays the whole file (all six sounds), the second button creates a random number (0-5) then selects the start and length of that sound from the “soundArray” and plays it with the code line :
I have no idea what that first “0” is in the code or what its functionality is.
If you run it in Chrome (which I don’t use) you probably might have to include a call to this kind of code somewhere:
BABYLON.Engine.audioEngine.unlock();
otherwise you might get an icon in top corner of the screen and the sounds may not play.
I’ve tried to explain the blocks of code as best I can. Not sure what the example code might be in the documentation. And I’m not a good coder - so maybe you can improve it
@PirateJC : So that is a start. Look forward to your comments and thoughts
Stay Safe, gryff
EDIT: This variation of the playground seems to work in Edge Browser without producing the “audio not playing” icon. No idea about Chrome, Safari or Android devices : Playground
Anyway @PirateJC change the code as you wish to improve the efficiency
Thanks for putting together this example! This is really stellar! I’ll add it into the docs now.
For this:
I solved it by making sure the sound does not autoplay on load. The browser will automatically flag the user to accept sound if it’s not hidden behind a button. In the case of your original playground, the sound would technically be set to play as soon as it loaded, flagging the browser to ask the user permission to accept sound.
By setting the loader to not autoplay, the first time the browser thinks sound is initiated, is after a button press and the browser is smart enough to know that it no longer needs to prompt the user.
Here’s the updated playground:
With line 7 containing the change I made:
var theSounds = new BABYLON.Sound("allSounds", "sounds/6sounds.mp3", scene, null, {autoplay:false});
@PirateJC : I checked the new “audio sprites” section of the docs this morning to see how your new code worked. A couple of things:
Seems to work OK in Firefox, Chrome and Edge except if I try to refresh the playground in Edge - then I get the “audio muted” icon and it no longer works. Does that matter?
The “Playground 1” is still playing all the sounds - not a clip. I think due to the fact that the length and offset values are in milliseconds not seconds. It should be something like this:
var soundSprite = new BABYLON.Sound(“Violons”, “/sounds/6sounds.mp3”, scene, null, { loop: true, autoplay: true, length: 9.200, offset: 14.000 });
NOT
var soundSprite = new BABYLON.Sound(“Violons”, “/sounds/6sounds.mp3”, scene, null, { loop: true, autoplay: true, length: 9200, offset: 14000 });
Yeah, it does seem like edge is a bit more restrictive when it comes to playing audio on loaded pages. Little we can do about it except for this form of hack:
Does that matter?
