Tag Archives: Web Pages

Enabling Sound Effects on Web Pages


via Amphibian Abstracts: Enabling Sound Effects on Web Pages.

I threw in a simple effect in today’s comic where the computer is playing an acoustic guitar. Push the play, pause, and stop buttons above it, and you can control some real acoustic guitar music. What used to be a monumental task – putting sound effects in a web page – is now extremely simple.

It occurred to me that while I’ve mentioned using SoundManager2several times in the blog, I haven’t actually shown an example of its use since 2010! Things have changed since then, so it’s worth bringing up again.

I like SoundManager2 because it’s easy. I’ve been using it since before there was an HTML5 Audio specification, and have been very thankful for it. Abstraction solves all problems in computer science, and SoundManager2 provides a great abstraction on top of all the different ways to play sounds across different browsers on different types of devices. Sometimes it will use HTML5, sometimes it will revert to Flash (hopefully not often these days). But it just works.

When I made my game entry for the GitHub Game Off 2015, I used the Crafty JavaScript game framework. To play sounds across different platforms, I had to provide the sound effects in MP3, OGG, and WAV formats. It chose the correct one to play for whatever the client’s capability happened to be. But back in 2013, my Game Off entry was coded from scratch and I used SoundManager2. I only had to provide sounds in MP3 format, which made my life easier.

Not that it’s too difficult to convert sound formats with Audacity, but it was an extra step that I would have preferred to avoid. But I digress…

I’ve put sound effects in more than one of my comics recently and the pattern is always the same. First, simply include SoundManager’s JavaScript file in your page. It comes with both debug and non-debug versions of the full-size and minimized versions. For production, I usesoundmanager2-nodebug-jsmin.js.