What is the best audio file format to play audio from javascript in custom chromecast receiver

Question

I have developed a simple custom chromecast receiver for a game.

In it I play short sounds from the receiver javascript using:

 this.bounceSound = new Audio("paddle.ogg");

to create the audio object when the game is loaded, and then using:

 this.bounceSound.play();

to play the sound when needed in the game.

This works fine in chrome on my laptop, but when running the receiver in my chromecast some sounds don't play, others are delayed.

Could this be a problem with my choice of sound format (.ogg) for the audio files?

If not, what else could be the problem.

Are their any best practices on the details of the sounds files (frequency, bit depth, etc?).

Thanks

tiguchi tiguchi · Accepted Answer · 2015-03-20T00:46:54

Just for the record to avoid future confusion of other developers trying to load and play back multiple short sounds at the same time:

On Chromecast, the HTML video and audio tags can only support a single active media element at a time.

(Source: https://plus.google.com/+LeonNicholls/posts/3Fq5jcbxipJ - make sure to read the rest, it contains also important information about limitations)

Only one audio element will be loaded, others get error code 4 (that was at least the case during my debugging sessions). The correct way of loading and playing back several short sounds is using the Web Audio API as explained by Leon Nicholls in his Google+ post I linked to above.

Simple Web Audio API Wrapper

I whipped up a crude replacement for the HTMLAudioElement in JavaScript that is based on the Web Audio API:

function WebAudio(src) {
    if(src) this.load(src);
}

WebAudio.prototype.audioContext = new AudioContext;

WebAudio.prototype.load = function(src) {
    if(src) this.src = src;
    console.log('Loading audio ' + this.src);
    var self = this;
    var request = new XMLHttpRequest;
    request.open("GET", this.src, true);
    request.responseType = "arraybuffer";
    request.onload = function() {
        self.audioContext.decodeAudioData(request.response, function(buffer) {
            if (!buffer) {
                if(self.onerror) self.onerror();
                return;
            }

            self.buffer = buffer;

            if(self.onload)
                self.onload(self);
        }, function(error) {
            self.onerror(error);
        });
    };
    request.send();
};

WebAudio.prototype.play = function() {
    var source = this.audioContext.createBufferSource();
    source.buffer = this.buffer;
    source.connect(this.audioContext.destination);
    source.start(0);
};

It can be used as follows:

var audio1 = new WebAudio('sounds/sound1.ogg');
audio1.onload = function() {
    audio1.play();
}

var audio2 = new WebAudio('sounds/sound2.ogg');
audio2.onload = function() {
    audio2.play();
}

What is the best audio file format to play audio from javascript in custom chromecast receiver

2 Answers