优化iOS Web App的音频

Question

I'm currently developing and testing a game for iOS using Javascript with the Cordova framework. I'm attempting to add sound effects when certain nodes are touched. Since nodes can be touched repeatedly at any rate. I'm using...

var snd = new Audio("audio/note_"+currentChain.length+".mp3");
snd.play();

Which works for what I need but when I enable these effects I find that the game lags. I'm working with mp3 files that have been shrunken down to about 16kb in size and even still the lag is substantial.

What's is the best way to optimize sound in my situation? Am I limited on quality because the application is not native?

Thanks!

Answer 1

It would be the best option to preload them and have them ready when needed. I just wrote up a quick self-contained closure that I think will show you most of what you'd like to know how to do.

var playSound = (function () {
        var sounds = 15, // idk how many mp3 files you have
            loaded = new Array(sounds),
            current = -1,
            chain = [],
            audio,
            i;

        function incrementLoaded(index) {
            loaded[index] = true;
        }

        // preloads the sound data
        for(i = 0; i < sounds; i++) {
            audio = new Audio();
            audio.addEventListener('canplay', incrementLoaded.bind(audio, i));
            audio.src = 'audio/note_' + i + '.mp3';
            chain.push(audio);
        }

        // this will play audio only when ready and in sequential order automatically
        // or "which" index, if supplied
        return function (which) {
            if(typeof which === 'number') {
                current = which;
            } else {
                current = (current + 1) % sounds;
            }

            // only play if loaded
            if(loaded[current]) {
                chain[current].pause();
                chain[current].currentTime = 0;
                chain[current].play();
            }
        };
    }());
// would play sounds in order every second
setInterval(function () {
    playSound();
}, 1000);

Answer 2

If you are using multiple files, I'd suggest you to change that to a single file, using the idea of sound sprites. This link has more tdetails about it: http://www.ibm.com/developerworks/library/wa-ioshtml5/

From my own experience, try increasing the file bitrate if you are not getting the sound to play exactly where you want it to, ref: http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/