Web Audio Api trouble(DOM Exception 12)

Question

I issued strange error(SYNTAX_ERR: DOM Exception 12) on Chrome with Audio API. I tried Audio Api first time and did tutorial(few times) of Kyle Nau(http://www.youtube.com/watch?v=1wYTkZVQKzs). When I run code with simple mp3 playing all sounds plays fine, but when I try to add volume control block from same tutorial plays only last sound in list of new object creation. Two first shows "SYNTAX_ERR: DOM Exception 12" on play. I checked mp3s and changing position on declaration = same bad effect. Remove volume control and all plays fine again. In this tutorial all fine too.

Tests show that problem apper when uncomment this part:

        playSound.connect(this.gainNode);
        this.gainNode.connect(audioContext.destination);

I can't understand why this error is appers.

Here code. This is fine working variant(i marked problem place with comment):

    function Sound(source, level) {
    if (!window.audioContex) {
        audioContext = new webkitAudioContext;
    };
    var that = this;
    that.source = source;
    that.buffer = null;
    that.isLoaded = false;

// that.gainNode = audioContext.createGain();

// if (!level) {

// that.gainNode.gain.value = 1;

// } else {

// that.gainNode.gain.value = level;

// };

    var getSound = new XMLHttpRequest();
    getSound.open("GET",that.source,true);
    getSound.responseType = "arraybuffer";
    getSound.onload = function() {
        audioContext.decodeAudioData(getSound.response,function(buffer) {
            that.buffer = buffer;
            that.isLoaded = true;               
        });
    };
    getSound.send();
};

Sound.prototype.play = function(){
    if(this.isLoaded === true) {
        var playSound = audioContext.createBufferSource();
        playSound.buffer = this.buffer;

// playSound.connect(this.gainNode);

// this.gainNode.connect(audioContext.destination);

        playSound.connect(audioContext.destination);
        playSound.noteOn(0);
    };
};

// Sound.prototype.setVolume = function(level) {

// this.gainNode.gain.value = level;

// };

var laserSound = new Sound("sound/laser.mp3");
var dropSound = new Sound("sound/drop.mp3");
var pickupSound = new Sound("sound/pickup.mp3");

// laserSound.setVolume(.1);

window.addEventListener("keydown", onKeyDown);

function onKeyDown(event) {
    switch (event.keyCode) {
        //Z
        case 90: 
            laserSound.play();
        break;
        //X
        case 88:
            dropSound.play();
        break;
        //C
        case 67:
            pickupSound.play();
        break;
    };

};

Answer 1

When you create your gain node in the first line you've commented out, it must be audioContext.createGainNode(); rather than audioContext.createGain();

It looks like you're missing the Node.

I hope that helps.

Answer 2

You have a syntax error somewhere. You don't need to put semi colons after function declarations. You would only use a semi colon in this case:

var myFunction = function(){

};