Viability of HTML5 audio for a music web app?

Question

To preface this, all of my experience has been with developing Ruby on Rails web apps serving, essentially, text data - I don't have any experience yet with rich media.

I'm looking into developing a music notation app (for practice and because I'm dissatisfied with many of the current options), and am trying to determine whether or not to build a native app or a web app. Since all of my programming experience lies in web development, I would prefer to make this a web app if I can, because if I chose to go native I would need to find a decent cross-platform solution in addition to the usual pitfalls of developing natively.

I suspect that even with HTML5 I wouldn't have access to enough processing power to make a browser-based audio engine feasible. It would need to have the ability to play and sequence not a single large .wav file of a song, but many short .wav files concurrently and in sequence. There would be no need for recording - only playback.

But since I've never done this before I really don't know if this is possible. So, I wanted to pose this to more experienced HTML5 media developers:

For modern browsers (I'm not too concerned with support for older browsers), would such an audio engine be feasible? (As in, is the current landscape of JS libraries and the HTML5 audio API sufficient for building something like this?) Or would something like this be far too CPU / memory hungry in a browser?

Thanks!

Answer 1

See Molgav tracker. It works on desktop and mobile, it uses hundred of sampled instruments, it has UI adapted for small mobile touchscreens. See how examples sounds.

Answer 2

I've been investigating Web Audio Api to build synths, and it's still very primitive and difficult to use. The infrastructure seems to have had a boost when Web Audio was introduced, but not much development since. Mobile audio on the web is rarely mentioned, too clunky, or unsupported.

At the same time, JS has become significantly faster with the V8 engine, JS loading can happen as needed, asynchronously, and non-blocking, which may solve many of the CPU/memory concerns you have. Look into NodeJS and various module loaders such as webpack, ES6, for more info.

I think there will be attention to web-based music apps because the web can support multiple users. That could be a good reason to keep pushing through these murky waters.. especially if you're talking concurrent connections.

Answer 3

In my experience Chrome and Firefox for desktop both work great with multiple, sequenced, .wav files embedded in audio tags. You can trigger them with JavaScript and it all seems to work great.

Unfortunately, Mobile Safari seemed to be unhappy with more than one audio tag playing at once, and Chrome for Android had similar limitations. This was a year ago, so things might be different now.

Since we were targeting iPads, we wound up using Phonegap to mix in some native sound libraries into our HTML & JavaScript app. One gotcha that tripped us up: if you want looping audio samples, stick to .wav files; .mp3 files have some silence at the start and end that's really tricky to get rid of.