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.
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.
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?
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.