Search code examples
javascriptgoogle-chromehtml5-audio

Web Audio API trouble (DOM Exception 12)


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 appear when uncommenting this part:

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

I can't understand why this error is appears.

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;
        };

    };

Solution

  • 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(){
    
    };