1
\$\begingroup\$

I'm planning some HTML5/Javascript games. They will be casual games for the most part, but would still benefit from music and sound effects. I would really like to use the <canvas> and <audio> features. I do not anticipate needing to play any movie files like .avi or .mp4.

But I run into a problem. According to this chart, Microsoft Internet Explorer does not support .wav or .ogg! And Safari doesn't support .ogg.

So now I'm making my own chart for what audio files I should use for what browsers. Here it is so far:

                     SFX        Music

Desktop Chrome      .wav        .ogg
Desktop Firefox     .wav        .ogg
Desktop IE          ???         ???
Desktop Safari      .wav        .m4a (alac)
Desktop Opera       .wav        .ogg

Mobile Chrome       .wav        .ogg
Mobile Firefox      .wav        .ogg
Mobile IE            ???        ???
Mobile Safari       .wav        .m4a (alac)
Mobile Opera        .wav        .ogg

(I could not find any info for Microsoft Edge on whether .wav or .ogg will work in the <audio> tag.)

As you can see, the big question lies in Internet Explorer. What audio formats should I use for sound effects and music?

It appears that HTML5 only supports 3 types: mp3, wav, and ogg. So for Safari I will need a plugin or some way to play .m4a music natively if possible. mp3 is out of the question due to absurd licensing fees. Flash/Shockwave is out of the question too.

I have read that something called bgsound can be used in IE, but it's "not standard". I've never used it before and don't know what it is.

So what audio formats should I use for IE? What is the "normal" way that IE plays sound and music in the first place? I really hope I don't need some plugin like Silverlight because those are a pain to users, especially casual game users.

\$\endgroup\$
  • \$\begingroup\$ Hey did you find a definite answer for which file type to use? \$\endgroup\$ – Esqarrouth Dec 12 '18 at 21:20
  • 1
    \$\begingroup\$ @Esqarrouth No i never did. According to market share (netmarketshare.com/browser-market-share.aspx) , I'm just not gonna worry about IE or Edge. Poor firefox tho is dying. \$\endgroup\$ – DrZ214 Dec 14 '18 at 1:35
  • \$\begingroup\$ So just .wav then? \$\endgroup\$ – Esqarrouth Dec 14 '18 at 16:31
1
\$\begingroup\$

On Mozilla developper website you can find the following informations :

  1. MP4 is supported by IE
  2. OGG is not supported by IE
  3. WebM is supported by IE with the addition of a plugin

Anyway, you need to know it is a real pain in the *** to make your audio files working on all browsers. First thing to do is link the 3 formats in order to let the browser chose the one it prefers, but even then you will likely encounter many incomprehensible issues due to the high diversity of browsers, versions, etc...

Note :

Even though it does not answer the question, I think it is worth noting that an easy solution would be not to support Internet Explorer for your game. The majority of people still using IE are either companies or old people. Either way, these people are less likely to play your game, so you should weight out if you are not going into useless troubles trying to make IE support.

\$\endgroup\$
  • \$\begingroup\$ Will WebM allow me to play .wav and .ogg in IE? If so I'll look into it. \$\endgroup\$ – DrZ214 Dec 23 '16 at 13:54
  • \$\begingroup\$ Did you go on the link I provided? \$\endgroup\$ – realUser404 Dec 23 '16 at 14:07
  • \$\begingroup\$ Yes, it talks about V8 and V8 and opus, none of which I know. No offense but your post doesn't answer my question: which audio format to use? If you're recommending WebM, please go into it a little more. BTW I will not "list all 3" because I won't use .mp3 as I specific in my OP. \$\endgroup\$ – DrZ214 Dec 23 '16 at 14:22
  • \$\begingroup\$ Was a typo, I meant MP4, going to edit \$\endgroup\$ – realUser404 Dec 23 '16 at 14:36
  • \$\begingroup\$ And I am not especially recommending WebM, actually OGG + MP4 should cover 90%+ of use case, simply now you know about it and can make your own researches \$\endgroup\$ – realUser404 Dec 23 '16 at 14:42
0
\$\begingroup\$

First ask yourself this question: Why am I going to use web technologies for my game project?

If the answer is similar to this: "Because I like/am more productive coding in JavaScript" or "HTML+CSS save a lot of time doing the GUI", etc. Then, today there are ways to use those technologies to develop desktop/mobile apps.

For the desktop you have Electron and NW.js. Of all the advantages they offer, for your specific problem, you have to worry only for the audio/video formats they support. All users will be running the same runtime (the same "browser") when playing your game, no risk of your game page being loaded by an incompatible browser.

Development is handled in nearly the same way of any browser game. Compliant html/css/JavaScript will just work, you can even use js libraries like JQuery and they will just work. As a bonus, you can use the filesystem using apis not available in browsers.


Now, if it has to be a browser game, for whatever reason, then you will have to handle different browsers in the usual way, that is to provide multiple versions of each media file. This article comes to mind: http://diveintohtml5.info/video.html

The article is about video, but the strategy for audio is the same.

<audio id="electric_discharge_audio">
    <source src="snd/electric_discharge.ogg" type="audio/ogg" />
    <source src="snd/electric_discharge.aac" type="audio/mp4" /> <!--MSIE-->
</audio>

Or with JavaScript:

var audio = document.createElement("audio");
var source = document.createElement("source");
source.type = "audio/ogg";
source.src = "snd/electric_discharge.ogg";
audio.appendChild(source);
source = document.createElement("source");
source.type = "audio/mp4";
source.src = "snd/electric_discharge.aac";
audio.appendChild(source);

Game.Resources.Audio.ElectricDischarge = audio;

About "wav" files. Reasons to use that format for short sound effects in native games go from see no gain in storage save when encoding them to mp3/ogg/your_favorite_format, fear of audio artifacts in important game audio effects (bullet, magic, etc), prevent laggy decoding in slower machines (somehow more tolerable for the background music).

"It would be a shame if nobody played your game because instead of downloading in 10 seconds, it took 2 minutes, of which 1 minute 50 seconds was downloading WAV files. It's like having all the images on your website in BMP format. Nobody does that! So we really need a compressed format." (from: https://www.scirra.com/blog/44/on-html5-audio-formats-aac-and-ogg)

The trick to prevent the quick sound effects to play with the wrong timing when using web technologies is not in using the WAV format. You can use ogg (or its replacement for each browser) for everything as long as you don't detect encoding artifacts (and if you do, then encode with a higher bitrate/quality setting).

The trick is in having the audio resource to preload during the game/level/area/map loading screen, and having it ready to play when the sound effect is needed.

This problem will be present either in true browsers as in platforms like Electron and NW.js. By design, when you set the src attribute of an audio element, controlling when the "browser" will start buffering it is tricky. Maybe one of the JavaScript game engines / media libraries that exists today may help here.

By my own experience, don't trust that the local storage will be faster than the network. This is not a local storage read speed problem, the browser will need to buffer certain amount of data before start playing, you probably don't need to care about this for the background music, but fast audio effects will probably make your game feel awkward and non professional, at least the first time each audio element is played. And having it already cached won't save you from this, you need to have, for all audio effects that will be used in the current scene, enough buffered data so the browser can start play immediately when you call audio_element.play(). For short audio resources, the expected is that they will be buffered in their entirety, but when using web technologies our control over this is limited.

Here a person is using a technique that consist in playing the audio for the first time with volume set to 0.00000001 (maybe just 0 works too). https://stackoverflow.com/questions/8375903/problems-preloading-audio-in-javascript

I think that is only acceptable for small sound effects. As I said, just let the background music start at any time. In cases where you want to change background music quickly without weird timings, but at the same time prevent a very large audio file to silently play to the end in the background, then you can use the canplaythrough event to stop it as soon as it has enough data buffered.


About very old IE versions (prior to 11): do as most game developers do with non NVidia/AMD/[Intel] GPUs (at least for the desktop). Pretend they don't exist.

So, if going for the multi browser support, you need to care only for Microsoft Edge and Microsoft Internet Explorer 11 and I'm not very sure about IE 11.

I think Edge won't give us troubles here: https://blogs.windows.com/msedgedev/2016/04/18/webm-vp9-and-opus-support-in-microsoft-edge/#0SgrdYfAKrdXOpaY.97


Web Audio API: If you decide to ignore IE completely, you can safely use it. I still have to test in Edge (feel free to edit this answer if you have done it already), but I guess it won't give us troubles with this.

\$\endgroup\$
  • 1
    \$\begingroup\$ +1 for the play at volume 0.001 trick. As of right now im embedding all resources inline html using base64 encoding. And I mean ALL: fonts, pictures, audio. I havent noticed any lag in the SFX, which I put in .ogg. I will test the bkg music soon now that you made me aware of possible lag due to decodin/buffering. I don't care any more about IE. But Edge, maybe. Last I checked it wasn't that popular. I can get away with Chrome, FF, Opera, and Safari for now---or at least that is the plan. I hafta test the desktop and mobile versions of all of those, but I don't have the money for that just yet. \$\endgroup\$ – DrZ214 Jan 29 '17 at 5:02
  • \$\begingroup\$ @DrZ214 If budget is low, then maybe host everything and face hundreds/thousands visitors isn't viable either. Let me insist in Electron/Nw.js, let players download it once and then launch from their local storage and, if possible, host the game in some app store, so you don't have to pay for the hosting or worry about needed infrastructure. \$\endgroup\$ – Hatoru Hansou Jan 29 '17 at 9:50
  • \$\begingroup\$ I have an android phone and iPhone 5. The plan is to make versions for both plus facebook. If successful, I can expand to other phones. Facebook will be the only desktop version of the game(s). Facebook will do the "heavy lifting" server stuff. I chose JavaScript because it's the only language I know that's supported on all platforms without plugins, via the browser. I may still need slightly different versions for each device, but at least it's still using the same language. Contrast that with the differences between Java and Objective-C. Yuck. JavaScript should be much more maintainable. \$\endgroup\$ – DrZ214 Jan 29 '17 at 10:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.