Your thoughts on many sounds in html5

#1

Hey,
I’m working on a web app for creating sheet music, and I’d like to have some simple playback functionality in there. My solution would be to only use a piano sound, since it’s a simple sound that sounds natural no matter what length you give it. A piano has no “stopping” sound, it just stops sounding. Thus, ideal for my purposes.

So the idea would be to create a sound sample of every piano key over the duration of a few seconds, from the striking of a key until the moment all the sound is gone. These will be samples of somewhere between 10-30 seconds per key, which means 88 sound files of about 20 seconds.

And here is my “problem” (haven’t actually tried it yet), this is a lot of data, expecially when building for html5 target, since SoundJS needs at least three different file types for every sound, giving us a total of 88 * 3 = 264 sounds. And these are quite big files for their content, or at least the .wav files are. It might also be a lot to load from a web server, especially on slower internet connections.

So before I start creating these 264 sounds, I was hoping to see if there are some smart thinkers/guys with experience in SoundJS out here who have some tips or ideas to reduce my loading times and improve the performance of this app.
Does SoundJS load all the files no matter the browser? Or does it only load the files specifically meant for the browser?
Would it help to put all the sounds into one bigger file, and play from specific times (like using a sprite sheet), rather than from specific files? Or is it heavier on the machine to “scroll” to a specific part of a large sound file?
Will the browser actually handle realtime playing of all these sounds?

#2

I’ve never used SoundJS, but there ought to be some way to adjust pitch at runtime. Then you could get by with fewer sound files.

#3

I have no actual experience with it, but wouldnt MIDI suit your purposes? Not exactly sure how it works under the hood, but this seems similar to what you are after, no? https://mudcu.be/midi-js/

Piano demo: http://mudcu.be/piano/

#4

I’m not sure what the breaking point is for sound, but I know that it loads only what the browser requests. I recommend three formats because different browsers request/support different formats.

Having pre-created sounds is likely (?) lighter than trying to generate something at runtime. I’m not sure about a sound-sheet, maybe lighter to use independent sounds?

#5

I guess I’ll dive into the midi thing then, didn’t know that using midi was possible with Javascript.
For anyone interested, midi basically is just a file with data about notes, e.g., their pitch, length, strength, etc. When playing a midi file, it uses a sounds library native to the operating system of the listener. So it’s kinda ideal for my purposes :slight_smile:

#6

Might be easier to just create externs for that lib above? Not sure how it works of course, but just messing about with it seems pretty complete / quick… Much luck!