GainNode

START / STOP
GainNode
GainNode
PropertyValuehasOwnProperty
gain (AudioParam)
gain (AudioParam)
PropertyValuehasOwnProperty
AudioNode
AudioNode
PropertyValuehasOwnProperty
(function() {

    var onDOMContentLoaded = function() {

        window.AudioContext = window.AudioContext || window.webkitAudioContext;

        try {
            // Create the instance of AudioContext
            var context = new AudioContext();
        } catch (error) {
            window.alert(error.message + ' : Please use Chrome or Safari.');
            return;
        }

        var displayProperties = function(node, tableid, caption) {
            var html = '<caption>' + caption + '</caption>';

            html += '<thead>';
            html += '<tr>';
            html += '<th scope="col">Property</th>';
            html += '<th scope="col">Value</th>';
            html += '<th scope="col">hasOwnProperty</th>';
            html += '</tr>';
            html += '</thead>';

            html += '<tbody>';

            for (var key in node) {
                html += '<tr>';
                html += '<td>' + key + '</td>';
                html += '<td>' + node[key] + '</td>';
                html += '<td>' + node.hasOwnProperty(key) + '</td>';
                html += '</tr>';
            }

            html += '</tbody>';

            document.getElementById(tableid).innerHTML = html;
            document.getElementById(tableid).parentNode.previousElementSibling.style.display = 'block';
        };

        // for the instance of OscillatorNode
        var oscillator = null;

        // for legacy browsers
        context.createGain = context.createGain || context.createGainNode;

        // Create the instance of GainNode
        var gain = context.createGain();

        // Flag for starting or stopping sound
        var isStop = true;

        /*
         * Event Listener
         */

        // Start or Stop sound
        document.querySelector('button').addEventListener(EventWrapper.CLICK, function() {
            if (isStop) {
                // Create the instance of OscillatorNode
                oscillator = context.createOscillator();

                // for legacy browsers
                oscillator.start = oscillator.start || oscillator.noteOn;
                oscillator.stop  = oscillator.stop  || oscillator.noteOff;

                // OscillatorNode (Input) -> GainNode (Volume Controller) -> AudioDestinationNode (Output)
                oscillator.connect(gain);
                gain.connect(context.destination);

                // Start sound
                oscillator.start(0);

                isStop = false;
                this.innerHTML = '<span class="icon-pause"></span>';

                /*
                 * Display properties
                 */

                // Prototype chain
                var prototypes = {};

                prototypes.GainNode  = Object.getPrototypeOf(gain);                 // GainNode instance -> GainNode
                prototypes.AudioNode = Object.getPrototypeOf(prototypes.GainNode);  // GainNode -> AudioNode

                displayProperties(gain,                 'gainnode-properties',      'GainNode');
                displayProperties(gain.gain,            'gainnode-gain-properties', 'gain (AudioParam) ');
                // displayProperties(prototypes.AudioNode, 'audionode-properties',     'AudioNode');
            } else {
                // Stop sound
                oscillator.stop(0);

                isStop = true;
                this.innerHTML = '<span class="icon-start"></span>';
            }
        }, false);

        // Control Volume
        document.getElementById('range-volume').addEventListener('input', function() {
            var min = gain.gain.minValue || 0;
            var max = gain.gain.maxValue || 1;

            if ((this.valueAsNumber >= min) && (this.valueAsNumber <= max)) {
                gain.gain.value = this.valueAsNumber;
                document.getElementById('output-volume').textContent = this.value;
                displayProperties(gain.gain, 'gainnode-gain-properties', 'gain (AudioParam) ');
            }
        }, false);
    };

    if ((document.readyState === 'interactive') || (document.readyState === 'complete')) {
        onDOMContentLoaded();
    } else {
        document.addEventListener('DOMContentLoaded', onDOMContentLoaded, true);
    }

})();
function EventWrapper(){
}

(function(){
    var click = '';
    var start = '';
    var move  = '';
    var end   = '';

    // Touch Panel ?
    if (/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) {
        click = 'click';
        start = 'touchstart';
        move  = 'touchmove';
        end   = 'touchend';
    } else {
        click = 'click';
        start = 'mousedown';
        move  = 'mousemove';
        end   = 'mouseup';
    }

    EventWrapper.CLICK = click;
    EventWrapper.START = start;
    EventWrapper.MOVE  = move;
    EventWrapper.END   = end;
})();