Web Audio samples & documentation available

[davrous]

Hi,

 

 I've been working hard to ship a first version of a Web Audio engine into babylon.js. Everything is being documented here: http://babylondoc.azurewebsites.net/page.php?p=24824 with a lot of links to some samples into the playground.

 

 I hope that you'll like the API. I'm now looking forward to your feedbacks and comments.

 

 Next step in the following days is to finalize the 3DS Max exporter to include audio. Stay tuned!

 

Bye,

 

David

[Dad72]

The documentation is very complete. thank you Davrous .
 
I have a question. the second parameter can he receive several format. 
 
exemple:
var music = new BABYLON.Sound("Music", "{music.ogg, music.mp3, music.wav }", scene, null, { loop: true, autoplay: true });
 
If ogg is not supported by the browser, it tries the next ... Is this possible?
 
Otherwise, nothing to say, that's great. I'll test it all very soon.

[gryff]

David, I was wondering about documentation the other day. Will read through it and give you my thoughts - if I can think of anything useful.

 

Next step in the following days is to finalize the 3DS Max exporter to include audio. Stay tuned!

 

Will there be an exporter for Blender?

 

cheers, gryff

[GameMonetize]

Yes gryff

[davrous]

Thanks Gryff! It will be included into the Unity exporter also.

@dad72: Yes, why not. I'll see if it's complex to integrate or not. But is there any interest of using .ogg files?

David

[Dad72]

Yes ogg is very light.

 

C’est le format le plus léger qui prend pas de place et se charge plus rapidement..

[GameMonetize]

Ogg only works on Chrome unfortunately

[Dad72]

OGG: Chome and Firfox and Opera => (Very light)

MP3: All => (light)

Wav: Chrome, Firfox, Opera, Safari => (Too heavy)

 

http://www.w3schools.com/html/html5_audio.asp

[iiceman]

Awesome! Can't wait to try that you!!!

 

One thing: The playground example for attaching sound to a mesh in the docs seems broken/empty: http://www.babylonjs-playground.com/index.html?23 <- the 23 at the end doesn't look like the usual parameter, maybe something missing here?

[Dad72]

One thing: The playground example for attaching sound to a mesh in the docs seems broken/empty: http://www.babylonjs-playground.com/index.html?23 <- the 23 at the end doesn't look like the usual parameter, maybe something missing here?

 

Yes, i think a bug when loading documentation from an outside link. if you click again on the link directly from the tutorial, documentation will be full.

[GameMonetize]

This is not a bug. This is a way to link to already defined samples (hence number 23 here)

[Wingnut]

haha.  Oh my, some confusion may have happened.

 

@DAD72 - iiceman was talking about the ?23 at the end of the playground url... he thought it was strange.

 

@deltakosh, I think the bug Dad72 is talking about... is the documentation at BabylonDoc refusing to load-in completely.  It is sometimes truncated.  This is an issue that is being worked.  Possibly Firefox only.

 

iiceman, you're on-track now too, right?  playground?number... is how you load-in a specific demo scene.... directly, as DK stated.

 

Ok, sorry to interrupt, but I saw a conversational "weeble" happen there, so I applied some duct tape.    Party on!

 

Davrous, congrats, well done!

[davrous]

Thanks for your feedbacks.

I still can't see the purpose of using .ogg is it's not working everywhere whereas .mp3 does. IE and Safari won't support .ogg for instance. Is there any other pros for .ogg vs .mp3?

David

[jerome]

I don't think W3C tells antyhing about audio formats in the recommendation : http://webaudio.github.io/web-audio-api/

 

So, it is then just a framework opinion or choice in regard of utility versus implementation cost

[spritefire]

If you use mp3 it will mean that IE11 will be supported.
Where as from what I have read with the beta webgl exporter in Unity 5, IE 11 is not supported because they use ogg as it supports more than 2 channels (but have mentioned they might consider switching to mp3 in the future).

[jahow]

Thank you! BabylonJS is getting better every day. Will use this API for my project and let you guys know if I see any potential improvements.

 

Also: from what I understand, the MP3 format is widely considered among audio professionals as a 'bad thing' (loss of certain frequencies & details). So I guess OGG support would be better in the long run. At least the guy who did sound design for me would most likely prefer to work with this format.

[Dad72]

Wingnut thank you for correcting. so the bug is what you say. doc does not charge completely. I did not understand what iiceman said. (sorry)

 

<fr>

@Davrous: Je vais vous expliquer en français pour ogg: Ce que je propose est que le moteur audio essaye de lire dans l'ordre les fichiers {ogg, mp3} pour exemple. Si ogg est compatible sur le navigateur que l’utilisateur a, cela liras le ficher ogg avec un chargement rapide, mais le si navigateur ne prend pas en charge ogg le moteur audio essayeras de lire le format suivant mp3 qui lui est toujours compatible sur tous les navigateurs.

Je pense que ogg est un format très léger qui chargera les musiques/son même longue rapidement. C’est un format vraiment bon pour le web et peut être qu’à l’avenir d'autre navigateur le prendront en charge, non ?

 

Je pense que ce qu'explique aussi spritefire est une autre des raisons de pouvoir utiliser ogg

</fr>

<en>

What I propose is that the audio engine tries to read the files in the order {ogg, mp3} for example. If ogg is compatible on the browser the user, it will read the ogg file with fast loading, but if browser does not support ogg will try out the audio engine to play the mp3 format that is still compatible it all browsers.

I think that is a very light ogg format that will load even long music/sound quickly. It's a really good format for the web and can be in the future other browser will take charge, no?

 

I think that explains also spritefire is another reason to be able to use ogg

</en>

[davrous]

ogg doesn't load faster than mp3. Still, I've read it's a better format for certain features such as handling loops.

 

But the philosophy of babylon.js is to run everywhere and ogg doesn't run everywhere.

 

Anyway, it should be that complex to add an array as a 3rd kind of parameter and check support for the codec. Web Audio is supporting what the audio tag is supporting. So I simply need to check that in the constructor of the audio engine for instance.

 

But you can also do it on your side. Check what the audio tag supports and call the new BABYLON.Sound based on that.

[Dad72]

But your examples are in wav and yet it is not supported by Internet Explorer. Only mp3 is supported by all browsers. ogg and compresses much more than mp3. I mp3 300KB to 150KB which ogg with the same file.

 

But indeed I can also do myself. Thanks davrous

[davrous]

The problem is not that IE doesn't support yet WAV but rather than it doesn't support web audio yet (but very soon! ).

[Dad72]

But you can also do it on your side. Check what the audio tag supports and call the new BABYLON.Sound based on that.

 

I think it's something like this that you advise me Davrous. I put this here, maybe someone else will be interested:

 

Wrong use. See below for a correction.

var sons = null, ogg = music.ogg, mp3 = music.mp3, wav = music.wav;

var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;

var is_explorer = navigator.userAgent.indexOf('MSIE') > -1;

var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;

var is_safari = navigator.userAgent.indexOf("Safari") > -1;

var is_Opera = navigator.userAgent.indexOf("Presto") > -1;

if(ogg != null && (is_chrome || is_firefox || is_Opera)) {

    sons = new BABYLON.Sound("musicOgg", ogg, scene, null, { loop: true, autoplay: true, spatialSound: true });

}

else if(mp3 != null) {

    sons = new BABYLON.Sound("mucicMp3", mp3, scene, null, { loop: true, autoplay: true, spatialSound: true });

}

else if(wav != null && !is_explorer){

    sons = new BABYLON.Sound("musicWav", wav, scene, null, { loop: true, autoplay: true, spatialSound: true });

}

[jerome]

You can't rely on user agent http header : it could be changed by anything else, browser editors could change names in it, etc

 

maybe is it worth using the canPlayType() method ?

[davrous]

As Jerome says, you shouldn't do user agent sniffing, do feature detection instead testing via the canPlayType() function on the audio tag. Some examples: http://diveintohtml5.info/everything.html

[Dad72]

I have never had a problem with that kind of use. this has never changed UserAgents and if it changes in 10 years, I change. I do not see why this is a bad use. Chrome that still name him Chrome, FireFox also... this is not going to change tomorrow or in 1 year.

[jerome]

mmh.. get your favorite web search engine and just type : "why avoid useragent"

plenty of reasons from many experts