サウンドスケジューリング | サウンドの生成

AudioContext currentTimeプロパティ

START / STOP

VOLUME : 0.3

INTERVAL : 1 sec

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

        // for the instances of OscillatorNode
        var C = null;
        var E = null;
        var G = 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;

        /*
         * Display currentTime
         */

        var outputCurrentTime = document.querySelector('[type="number"]');

        window.setInterval(function() {
            outputCurrentTime.valueAsNumber = Math.round(context.currentTime * 100) / 100;
        }, 0);

        /*
         * Event Listener
         */

        // Start or Stop sound
        document.querySelector('button').addEventListener(EventWrapper.CLICK, function() {
            // for base time
            var t0 = 0;

            // for scheduling
            var interval = document.getElementById('range-interval').valueAsNumber;

            if (isStop) {
                // Create the instances of OscillatorNode

                // Chord C
                C = context.createOscillator();
                C.frequency.value = 261.63;
                C.start = C.start || C.noteOn;
                C.stop  = C.stop  || C.noteOff;

                // Chord E
                E = context.createOscillator();
                E.frequency.value = 329.63;
                E.start = E.start || E.noteOn;
                E.stop  = E.stop  || E.noteOff;

                // Chord G
                G = context.createOscillator();
                G.frequency.value = 392.00;
                G.start = G.start || G.noteOn;
                G.stop  = G.stop  || G.noteOff;

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

                E.connect(gain);
                gain.connect(context.destination);

                G.connect(gain);
                gain.connect(context.destination);

                // Get base time
                t0 = context.currentTime;

                // Schedule of start time
                C.start(t0 + (interval * 1));
                E.start(t0 + (interval * 2));
                G.start(t0 + (interval * 3));

                isStop = false;
                this.innerHTML = '<span class="icon-pause"></span>';
            } else {
                // Get base time
                t0 = context.currentTime;

                // Schedule of stop time
                C.stop(t0 + (interval * 1));
                E.stop(t0 + (interval * 2));
                G.stop(t0 + (interval * 3));

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

        // Control Master 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;
            }
        }, false);

        // Control Interval
        document.getElementById('range-interval').addEventListener('input', function() {
            document.getElementById('output-interval').textContent = this.value;
        }, 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;
})();