A Sound Sprites Playground for @PirateJC and possibly the Documentation

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 :wink:

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 :

theSounds.play(0,soundArray[aRand0][0], soundArray[aRand0][1]);

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 :wink:

@PirateJC : So that is a start. Look forward to your comments and thoughts :slight_smile:

Stay Safe, gryff :slight_smile:

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 :slight_smile:

4 Likes

Ok @gryff first of all, you’re awesome!

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:

https://playground.babylonjs.com/#PCY1J#190

With line 7 containing the change I made:

var theSounds = new BABYLON.Sound("allSounds", "sounds/6sounds.mp3", scene, null, {autoplay:false});

Once again, you are AWESOME!

2 Likes

Added:

Should be live in a few minutes

3 Likes

@PirateJC : I checked the new “audio sprites” section of the docs this morning to see how your new code worked. A couple of things:

  1. 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. :unamused: Does that matter?

  2. 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 });

Just my thoughts.

Stay Safe, gryff :slight_smile:

@gryff

Adding @RaananW to lend his wisdom to this one:

You’re also 100% right about the Playground 1 example!

I’m making the necessary edits now!

You rock!

1 Like

Here we go:

What version of Edge? Edge chromium, or the old one?

@RaananW : The latest version I believe (Chromium) See image below

Stay Safe, gryff :slight_smile:

About My Edge

1 Like

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:

Babylon.js Playground (babylonjs.com)

1 Like

Ok @RaananW . I’m not sure how many people will be reloading the playground as opposed to re-running code. That is why I asked above does it matter.

Stay Safe, gryff :slight_smile:

1 Like