I have a new site that allows you to play sounds of letters on click. Each letter produces a separate sound. I went from roughly 500kb for .wav files to around 30kb for each sound file. That's a lot to load for each sound (200 sounds so far). Can we optimize this for mobile browsers? Should I combine all sounds into a single file, then jump to specific locations? Sort of like a "sound sprite sheet" sort of thing? What do game developers do to optimize their audio files?

  • Lance, I just googled "javascript play sound", which took me to stackoverflow.com/questions/9419263/how-to-play-audio, where several JScript libs are mentioned. I just peeked into the first one (howlerjs.com) and found immediately a "seek" method which would allow to do what you suggested. So yes, putting everything into one file and jump to specific locations should work (BTW, I would use a compressed sound format like MP3). Which prior research did you before you asked here, what did you find and why didn't it suit your needs?
    – Doc Brown
    Dec 24 '20 at 9:24
  • @DocBrown the prior research I have done is my years of experience with loading image files as sprites, and assuming the same for audio. I searched for audio sprites and "how game developers optimize audio" but didn't find anything. While howler has that seek method, I don't know if that is the right approach. What I'm asking about is what the best practice is from long game dev experience, not how to implement a seek method. Is it the right approach? Dec 24 '20 at 10:27
  • 1
    The only right approach I know is not to seek for "unversally right approaches" or "best practices". It seems you have specific requirements (200 sounds files of a certain size) - thats a good start. You have also a promising idea for solving your problem - great. You also found a lib which might provide the tools you need excellent. Next step would be to try it out and measure if the performance / load times please you. If not, I would ask on Stackoverflow and Gamedev.SE.
    – Doc Brown
    Dec 24 '20 at 11:07
  • Good to know. I find it interesting that SE related sites don't like best practices questions. That's how you really learn, well, best practices. Like what a developer will teach you if you are sitting next to them. I will try asking more specific questions in the future tho. Dec 24 '20 at 11:44
  • There have been several discussions about "Questions asking for best practices" on our meta sites, look here or here, for example. But this is an opinionated topic, and different people inside our community here may have different opiniions about this.
    – Doc Brown
    Dec 24 '20 at 13:39

Should I combine all sounds into a single file, then jump to specific locations?

This will work rather poorly in practice on most systems, I would not do that. Most systems will not jump perfectly accurate to the desired position or perfectly stop playing after a certain amount of time and then you get ugly glitches that will make your site appear like it was made by amateurs.

But what you can do is concatinating all sound files to a single file for download and then split this file back into individual files that can be played as described very detailed on this page (BTW, first hit on DuckDuckGo when searching for "speed up loading audio files html").

Also try to maximize compression. Some browsers also support OGG, not sure about their mobile versions but OGG allows you to reduce the bitrate even further than with MP3 and still obtain better quality.

And even when using MP3, try to reduce the bitrate as much as possible until you can hear compression artifacts, then stay just a bit above that bitrate. Most of the time people use way too high bitrates being afraid that otherwise their sounds will sound poorly but in practice hardly anyone will ever notice. Ideally optimize each file one its own as how far you can safely compress a file depends on its content.

  • I found out the hard way that it produced glitches after implementing it haha :/ Jan 11 at 21:51

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .