HTML5 Audio Tag and Surround Sound

I’m going to add quite a bit of content to this site soon, and have been looking into ways of embedding surround sound audio. The HTML5 Audio tag looks ideal for this and, it seems, some browsers will support 5.1 surround files….hooray. However, they all seem to support different format surround files……booo! Anyway, as a test, try the embedded players below.

Initial findings:

  • Chrome on PC – seems to successfully downmix to stereo and play multi-channel OGG, AAC and WAVE versions
  • Chrome on MAC – same as above EXCEPT, it doesn’t downmix to stereo, it only reproduces front channels (including Centre)
  • Firefox on PC – recognises ogg….refuses to play anything. Nothing else recognised (shame on you, firefox)
  • Firefox on Mac – plays ogg correctly in multi-channel, but over stereo reproduces front left out the left speaker and Centre front out of the right speaker! Doesn’t recognise any other formats.
  • Internet Explorer 9 on PC – correctly plays and downmixes AAC and WAVE versions (from what I can tell)
  • Internet Explorer 8 on PC – doesn’t recognise anything
  • Safari on Mac – Doesn’t play OGG, plays the rest. Downmixes to stereo including all channels, but downmixes AAC and WAVE by just routing surround Left and Right to the left and right front speakers, but seems to do a more complex downmix of AC3 to the front left and right (includes phase shifts by the sounds of it!)

This is a simple 5.1 test file with Microsoft Anna reporting speakers to you….

Ogg Vorbis :
AC3 :

22 Replies to “HTML5 Audio Tag and Surround Sound”

  1. A quick test on Chrome here suggests that all three work (although I don’t have 5.1 at home…..)

    Firefox loads ogg, but doesn’t play. Acknowledges the presence of AAC, but won’t load it. and ignores Wave….marvellous!

  2. ah, thanks for that. Hadn’t tried it on iOS yet. I’m assuming it was the AAC version that worked? Tried it on Safari today, and that played all apart from Ogg……still not tried it on a 5.1 system, but switching my PC into 5.1 speaker arrangement makes the rear left, rear right and centre front audio disappear from my stereo set-up which suggests that it’s working!

  3. Hi Bruce,
    Surround streaming on the net has been something that I’ve looked into multiple times over the past 2 years, and finally thought to do a search for html5 and surround. I subsequently came across this page. I have a surround setup on my pc and am also able to test surround on a mac. I’ll have a listen tomorrow and report back my findings. From what I have read, silverlight will do surround, but html5 would be much easier.

  4. Interestingly, Firefox will play multi-channel ogg on a Mac, so I’m confused as to why it refuses on a PC, and can only assume it’s a bug….. However, if it wasn’t for firefox, AAC would work across them all……

    It was your test that introduced me to the idea…..I just couldn’t work out a way of finding out which of the files were used on which browser without doing it myself πŸ˜‰

  5. All work perfect for me on 5.1 under Chrome.
    I wonder if/ when youtube will support this.

  6. I just played the WAVE and it was coming perfectly from the speakers it was supposed to.
    I’m on mountain lion, safari 6.0.3 and my audio interface is a TC electronic studio konnekt 48.
    pretty cool! πŸ™‚

  7. ok, in Chrome (26.0.1410.65) OGG, AAC and WAVE play, (AC3 doesn’t).
    Still on Mac, Mountain Lion.
    The thing is, they play but somehow Chrome overrides the output config and it plays L, R, rL, rR, C respectively through outputs 1,2,3,4,1
    instead of 5,6,7,8,9,10 as I configured my system.
    Hope this info is useful…

  8. Chrome on W7:
    HTML5 audio tag: AAC & OGG are playing in 5.1 (all ok)
    WMP plugin: AC3, AAC & OGG are playing in 5.1 (all ok)

    FF on W7:
    HTML5 audio tag: – nothing –
    WMP plugin: AC3, AAC & OGG are playing in 5.1 (all ok)

  9. This is amazing. I am doing some surround sound field recordings and have been looking for a way to allow people to listen to them in surround without having to distribute the source files. It looks like I would have to export an OGG copy as well as a WAV copy in order to reach the broadest audience, which is OK. I just need to figure out how you made the players!

  10. Sorry, David. Completely missed your comment. Making the player in HTML5 is a non-issue. It’s just a HTML tag and the browser makes the player. Look at the source for the page πŸ˜‰

  11. Hi. Thanks for the blog and info from you all. I am trying to start my site with WMA PRO support in 5.1 and AC3/DTS would be great as well. I understand Silverlight would work, but may lose support from Microsoft as it’s rumored leaving HTML5 to be the gold standard (hint hint Netflix).

    The AAC surround test here only works for me in ie. The other formats say invalid. I’m a newb, but any help is appreciated. I create DTS, AC3, and WMA files in that order per project usually. I want to post and broadcast. Your thoughts?

  12. I’d not recommend using silverlight as this isn’t very compatible on the Mac (Chrome on a Mac, for example, can’t run silverlight anymore). I’d recommend using multiple formats, and then putting them all in the same audio tag which then allows the browser to choose the format it prefers. I’ve kept everything separate so it’s obvious what works and what doesn’t.

  13. Hi I’m having an issue I have windows 10 Home I have a custom built desktop computer running the realteck onboard audio I have everything checked in my onboard sound and the windows properties for quadraphonic sound meaning 4 speakers or 4.1 speakers. Now I’m not looking for surround sound to come out of all 4 of my desktop klipsch speakers I’m just looking to hear sound out of all 4 of my speakers using the flash player or even html 5 and I can only hear sound out of my fron’t 2 speakers I have been having this problem for months I have the latest versions of flash installed 22ppapi and 22 npapi and I also can run anything on my computer (Offline) In windows with any extrenal player and it runs in all 4 speakers. so I know my sound controller is set up correctly. I also have adobe flash shockwave object enabled as an add on in ie 11 and I also have active x filtering disabled in ie as well. So I’m wondering if there is any special code that I can use or any trick that I have not tried to get all 4 of my speakers to run videos with youtube or metcafe or any online videos. And how would I use that codeTried adding this entry to the target box by right clicking The google chrome shortcut”C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –disable-audio-output-resampler –try-supported-channel-layouts but this did not good either. Any help would be great it’s looking like it’s a code issue of some sort. Html 5 does not run out of all 4 speakers either

  14. hello Bruce, are your result still the same nowadays (2017). I hope 5 years later, the support for audio 5.1 is mainstream… do you have recent tests ?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: