Test :: WebAudioAPI

by mohayonao

HTML

<button action="reset">reset</button>

<h1>OscillatorNode</h1>

<button node="osc" action="connect">connect</button>
<button node="osc" action="start">start</button>
<button node="osc" action="stop">stop</button>
<button node="osc" action="disconnect">disconnect</button>

<h1>ScriptProcessorNode</h1>

<button node="scp" action="connect">connect</button>
<button node="scp" action="disconnect">disconnect</button>
<span id="message"></span>

<h1>GainNode</h1>

<button node="amp" action="connect">connect</button>
<button node="amp" action="disconnect">disconnect</button>

<h1>AudioDestinationNode</h1>

JavaScript

var audioContext = new AudioContext();

var nodes = {};
var actions = {};

var $message = $("#message");

actions.reset = function() {
    try {
        nodes.osc.disconnect();
        nodes.scp.disconnect();
        nodes.amp.disconnect();
        nodes.osc.stop(0);
    } catch (e) {}
    
    nodes.osc = audioContext.createOscillator();
    nodes.scp = audioContext.createScriptProcessor(1024, 1, 1);
    nodes.amp = audioContext.createGain();
    
    nodes.amp.gain.value = 0.25;
    
    nodes.osc._conn = nodes.scp;
    nodes.scp._conn = nodes.amp;
    nodes.amp._conn = audioContext.destination;
    
    var count = 0;
    
    nodes.scp.onaudioprocess = function(e) {
        $message.text(count++);
        e.outputBuffer.getChannelData(0).set(
            e.inputBuffer.getChannelData(0)
        );
    };
    
    $message.text("-");
    $("button").css("color", "black");
};

actions.start = function(node) {
    node.start(audioContext.currentTime);
};

actions.stop = function(node) {
    node.stop(audioContext.currentTime);
};

actions.connect = function(node) {
    node.connect(node._conn);
};

actions.disconnect = function(node) {
    node.disconnect();
};

$("button").on("click", function(e) {
    var node = $(this).attr("node");
    var action = $(this).attr("action");
    
    if (action === "reset" || !nodes[node]) {
        actions.reset();
    }
    
    if (!nodes[node]) {
        return;
    }
    
    actions[action](nodes[node]);
    
    $(this).css("color", "red");
});