Question

I have a web application that uses jQuery to load some sound effect on user request. The file is currently compressed as WAV 16bit and takes 415kb. I don’t know what compression level or format should i choose in order to embed this file to HTML with small size and playable on all browsers.

converting to mono didn’t work
I did try converting to mono which reduced size by 20 times and i was able to play it in Windows but browser fails to play it.

pitch reduced size
I slightly increased pitch for the sound which made it shorter hence reduces initial size from 415kb to 210kb.

Thanks

Answer 1

jPlayer is a nice jQuery library that could be used to play the sound. You may need to customize the display of the player to make it hidden if you want to programatically play the sound.

You may need to encode the sound in multiple formats, but jPlayer can handle the fallback to flash if no native HTML5 audio support is detected.

Edit: mp4 and ogg can be played with most browsers. Modern browser support for sound formats can be seen here. Try ompressing to .mp4, .mp3 or .ogg – any of which could the file size by an order of magnitude or greater. Also, maybe a mono version of the file in one of those formates will play, again reducing the file size.

I think you really need to try different bit-rates depending on your sound quality and file size requirements. I would start with a 128kb stereo (if the original .wav is in stereo) .mp3 and reduce the bit-rate and/or channels if the file size is too large for your requirements; is this for a company Intranet, a public site, a mobile site…? A larger sound file may be acceptable on a company’s internal web site but not on mobile, for example.

Edit 2: From http://html5doctor.com/native-audio-in-the-browser/

If developers want to take full advantage of all browsers that support HTML5 audio, they’ll need to create both MP3 and Ogg (and in Opera’s case, WAV) versions of the audio file they want to stream!

Edit 3: A comprehensive summary on browser audio support.