1
\$\begingroup\$

I have looked at a number of ways to trigger audio in HTML5/JavaScript, but each time I find something that might be workable, I find web browsers and mobile devices it doesn't work on at all.

What is considered the best method that works across all web browsers and mobile for creating a game with sound using HTML5/JavaScript?

What do experienced interactive game programmers do? Do you check the user's web browser or mobile device and serve up different code to make it work? Or do you have a single solution for this? Or do you warn the user by supplying a list of web browsers and mobile devices the software is known to work with?

Additional Information: I found out that audio in some web browsers, like Safari on the Mac, it will load the audio file each time it is triggered, which causes a problem. I saw once solution using what is called Audio Sprites: https://phaser.io/examples/v2/audio/audio-sprite This way, you load one audio containing all your sounds needed, and then you pass a pointer to where in the audio file to start playing the sound and where to stop. That sounded like a solution, but this doesn't work on the Safari web browser, it produces no sound at all.

Then I looked into Web Audio API, and this is impressive: https://forestmist.org/share/web-audio-api-demo

While this worked on the Mac for Safari, Firefox and Google Chrome, and the iPhone, it doesn't work on Windows with Internet Explorer (or Safari on Windows either).

I've not tested Web Audio API on the android phone yet, because I don't have access to one at the moment. So I was wondering what experienced interactive programmers do to provide audio to work across most or all platforms? It seems a huge step-backwards to have to alert visitors to a website that they can only use the functions on it by using a short list of web browsers.

The issues as I see it seem to have to do with being able to load the audio file and not have it re-loaded over the internet each time it is referred as play(). I realize Web Audio API might provide much more capability than most of us needs, but is that the current gold-standard for audio in a HTML5/JavaScript game?

Here is a simple example, using audio that works on Google Chrome/Mac, but it doesn't work on Safari/Mac: https://rawgit.com/mehaase/js-typewriter/master/example3-typewriter/index.html

\$\endgroup\$
  • 2
    \$\begingroup\$ Usually you use a framework like Modernizr for feature detection. caniuse.com is also great for feature reconnaissance. What browsers are you trying to support and what specific API are you looking at? Usually a library will already exist to provide normalization over all the browser oddities for you. \$\endgroup\$ – Coburn Sep 25 '17 at 18:13
  • 1
    \$\begingroup\$ Sharing your research helps everyone! What did you try and on which platforms did it fail in what way? Maybe you just overlooked some detail which prevents one of your approaches to work on specific platforms? \$\endgroup\$ – Philipp Sep 25 '17 at 18:16
  • \$\begingroup\$ @Philipp Good question. Please see my additional information above. \$\endgroup\$ – Edward Coast Sep 25 '17 at 20:23
  • 2
    \$\begingroup\$ HTML5/Javascript devs are at the mercy of the spec when it comes to lower level features like audio. The APIs mentioned in caniuse.com are pretty much the only thing there is (aside from browser plugins, flash, Java applets which all have even worse support issues). Your only real option is to heckle the bug tracker of the browsers in question and to just drop support for a browser for the time being. In your case, you might actually be able to use both Web Audio and normal audio tags, and only use the one that works when the page loads. The only issue is the increased time and development. \$\endgroup\$ – Coburn Sep 25 '17 at 20:50
  • 1
    \$\begingroup\$ This shows promise, howlerjs.com \$\endgroup\$ – Edward Coast Sep 28 '17 at 19:24
1
\$\begingroup\$

Disappointing Answer:

If you decided to build something based on modern tools (HTML5/CSS3/JS6), then you should ignore browsers that don't support such features (like the Audio API), otherwise you will spend most of your time debugging and doing some dirty workarounds rather than developing. By the time you successfully made all the hacks to support these browsers, they'll probably be supporting these features.

Additional Notes:

caniuse.com is a good source to see what's supported and what's not as @Coburn said.

\$\endgroup\$

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.