Using createjs WebAudio with Phonegap (Cordova)

One of the things I hate about Phonegap (Cordova) is the audio support. Every time I worked on a project that required heavy audio usage not a single plugin worked fine

Cordova Media plugin is good for recording audio but when you try to play multiple audio files it leaks into memory and the OS stops your app. It also tends to break after using the recording feature. I’ve also tried the Native Audio plugin and although it’s much better it has its issues with features not working.

The createjs team released a new soundjs plugin called CordovaAudioPlugin. It did work for some time but because it is using Cordova Media it had the same issues. With newer version of the Cordova Media plugin it just causes your app to crash (04.2016, soundjs version 0.6.2).

Honestly, with the WebAudio browser support, I don’t think we need plugins for playing audio. WebAudio does the job nicely for mobile and desktop.

Why not just using  WebAudioPlugin plugin that comes with Soundjs? It should work on mobile devices but if you try using it on iOS it won’t work out of the box.

Cordova uses the file protocol when loading files and sometimes AJAX calls with file protocol return status 0 which is an error, but not in this case. All we need to do is make createjs treat status 0 as equal to status 200 and everything will work.

This code will only change createjs behavior when running with Cordova. Import it in your HTML like any other script tag.

Tips for Using WebAudio with Cordova

  • Mobile apps have limited resources but file access is fast. Don’t preload all the audio files at once.
  • When you don’t need an audio file anymore unload it. Don’t keep a large cache.
  • Adobe Animate (former Flash CC) HTML 5 canvas export loads all audio files you used on the timeline at start up. This makes sense for websites but might crash your mobile app. Avoid using too many audio files on your timeline or write a custom implementation that defers audio files loading.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.