I am building a website with a large amount of sounds that should be played upon clicking elements. (It is a language learning website, and many words and phrases will be clickable, to hear pronunciation.)

In an earlier prototype I simply load the sounds on the page, and then play them in elements' onclick-event.

I'm worried about the overhead of loading all sounds, on every page, always, as certain pages may end up having quite a lot of them. I figure it would be way better if sounds were not loaded before the user actually clicks an element.

But then again, would this lead to too considerable waiting time between click and playback? And can I make the sound be cached, so that on consecutive playbacks it will not be loaded every time? Also, how do I go about this as elegantly, so that the markup job does not become unbearable when there are maybe a hundred or more sounds in certain pages?

What would be the best way(s) to implement this?

closed as too broad by GlenH7, user40980, jwenting, Arseni Mourzenko, ChrisF Oct 19 '14 at 11:25

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • You should probably create some sort of local cache for the sounds so that users don't have to download the sounds every time they refresh the page. – Ampt Oct 13 '14 at 20:29
  • It causes physical pain for me to say this, but maybe Flash would be a good idea here. – user22815 Oct 13 '14 at 20:38
  • 5
    If you provide proper cache-control and expires headers for your sound files there is no reason to resort to flash. Just use standard browser cache. I would just build it around the html5 audio tag and you can probably find a flash shim to seamlessly support older browsers. – Esben Skov Pedersen Oct 13 '14 at 20:44
  • 3
    Instead of creating a local cache as @Ampt suggests, consider relying on HTTP caching. All you need is a web server that understands If-Modified-Since headers etc. It turns out that “I don't want to transmit this file twice” is a pretty common problem on the web, so solutions already exist – amon Oct 13 '14 at 20:45
  • @EsbenSkovPedersen, are you suggesting that the way I do it in my prototype, simply defining the audio elements on the page, is not as heavy as I think? How do I do proper cache-control, and what purpose do expire headers serve in this context? – zxz Oct 13 '14 at 20:57

I think you can look at a few options...

Start by Building 2 Prototypes

  • One prototype with all sounds pre-fetched.
  • One prototype with all sounds available on click.

This will allow you to actually compare if it's really that bad. Depending on how you architecture this, you probably won't need 2 separate prototype and just a configuration change (preferably with a URL request parameter, like ?sound-prefetch=false). This could come in handy later.

Local Cache

Depending on the usage of your site, it could be that a local cache would be good enough for you, if your users have modern browers supporting a local DB. Of course, this may not necessarily apply to your use case, but if it does maybe try to cache the most commonly used sounds for all users, and the recently used sounds for the current user.

Also make sure to leverage the browser's normal cache by specifying correct headers. That would work for most browsers, both modern and old.

Monitor Activity

The best way to do what's best for your users it to look at how they use your software. Do they listen to the same sounds sounds often? Do the location of the sound snippet have an impact on the likelihood of it being played (dead center of the screen, top nav bar, etc...)? Gather stats after a few days/weeks/months and see what makes the most sense to prefetch.

Compress Your Sounds

This will depend on your actual use case again, but I'd suspect that for music learning you can use pretty compressed audio files and still be able to hear quite well. So don't hesitate to crank up the compression ratios on the audio files you serve.

And by the way, what's the format of the files you serve?

How to Embed your Sounds?

How do you embed your sounds? Did you consider several approaches? You can play them using a simply JavaScript based player that will require to fetch the whole file, or maybe you can use a file format and a player that supports streaming, so that you don't need to wait for the file to be fully loaded.

Implementing your own embedded player (one for each sound), be it with JS, Applets, Flash or something else, might be a better alternative. Or maybe even a single Rich Internet Application might be a better alternative, depending on how many sounds you have per page.

Try to Give Your User a Choice

It might be best to then leverage a few of the strategies above and then give the users the chance to pick what's best for them. Your users in well-connected areas with fast broadband won't mind so much a few MBs of download per page, especially if they know what the intended purpose is, whether it's pre-fetched or not.

However, users who connect with a less than ideal bandwidth will thank you if they have the opportunity to chose how to load your pages.

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