Sign in to follow this  
KarelAnker

Audio streaming

Recommended Posts

Is this possible with Babylon, as creating a new BABYLON.Sound will preload your song fully before you can listen to it. I basically want it to download parts. When you have a 10 minute song, I don't want it to download all the 10 minutes, I want it to download the part it's currently playing + some minutes.

Share this post


Link to post
Share on other sites

Currently, I'm using a XHR to load & decode the sound with Web Audio.

 

If you'd like just to stream the music from your web server, simply use the HTML5 audio tag. Isn't it enough?

 

David

But there's no way to have it 3D spatial with a HTML audio tag?

Share this post


Link to post
Share on other sites

I've just finished my tests and published the updated version of BABYLON.Sound on the github: https://github.com/BabylonJS/Babylon.js/blob/master/src/Audio/babylon.sound.ts

 

It will be on the playground soon and I'll share a demo on it.

 

In the meantime, it's very easy to use. Just set a 'streaming: true' in the options of the Sound constructor and it will stream the sound using the HTML Audio tag rather than downloading & decoding it first.

 

Ex: var violons18 = new BABYLON.Sound("Violons", "./coding4fun2015.mp3", scene, null, { loop: true, autoplay: true, streaming: true });

 

All other features are implemented to support this new source: pause, stop, play, 3D spatialization, analyser & directional sound.

Share this post


Link to post
Share on other sites

Here is a simple sample: http://www.babylonjs-playground.com/#1Y9YWK then use the Sound element as described in the doc to apply 3D, playrate, whatever.

 

You can see in the Web Audio tab of Firefox that a MediaElement (HTML5 Audio tag) is being used as a source with the streaming: true option being enabled.

 

 

 

 

post-5482-0-29704600-1446291546.jpg

Share this post


Link to post
Share on other sites

Just on a side note: Is that SpeechSynthesisUtterance actually a "real" thing yet? I think it's pretty cool using plain text and transform it into audio. Any plans on integrating it with Babylon, yet?

Share this post


Link to post
Share on other sites

EDIT:

It seems that the HTML5 audio tag does not allow any streaming outside of the local file system.

 

Try streaming "http://ccmixter.org/content/teru/teru_-_We_re_on_the_Roll.mp3", the header has Access-Control-Allow-Origin: *, but for some reason when you're trying to stream Chrome outputs "MediaElementAudioSource outputs zeroes due to CORS access restrictions for ......."

 

You can check the receiving headers at http://www.rexswain.com/httpview.html

Share this post


Link to post
Share on other sites

Got it to work! You basically forgot to set the crossOrigin attribute to anonymous.

var music = new BABYLON.Sound("Music", ........................);music._htmlAudioElement.crossOrigin = "anonymous";

I would create a pull request but I don't dare to touch it  ;)

 

(Also, it seems that you can't attach the audio to an object, it's always 2D with the streaming tag)

Share this post


Link to post
Share on other sites

Got it to work! You basically forgot to set the crossOrigin attribute to anonymous.

var music = new BABYLON.Sound("Music", ........................);music._htmlAudioElement.crossOrigin = "anonymous";

I would create a pull request but I don't dare to touch it  ;)

 

(Also, it seems that you can't attach the audio to an object, it's always 2D with the streaming tag)

 

You can make it a 3D sound. Simply attach the sound to a mesh or use the boolean to make it 3D.

 

David

Share this post


Link to post
Share on other sites

I'm unsure how, as I don't know how to create the TypeScripts and the minified files, and I don't know which file to exactly edit

 

EDIT:

created a pull request

 

I've just added it in the TypeScript file. We've just updated the Playground with this new version! Enjoy!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.