初心者のためのJavaScriptで音を鳴らすメモ

さて、

昨日からJavaScriptを使って音をならそうと調べております。

いろいろとサンプルを作ってみては適当に動かしているのですが。

いまだに

音が鳴りません。。

な～めて～た～。。

ので、

少し真剣にまとめていきます。

JavaScriptで音を鳴らす。

調査をしていますと。Web Audio APIというものがあるらしく。 これを使えば音を鳴らせるとのこと。

Web Audio API の基礎

WEB SOUNDER

今回はWEB SOUNDERの記事を参考にさせていただきます。

WEB SOUNDER

概要 | Web Audio APIの基本処理 | WEB SOUNDER - Web Audio API 解説 -

オーディオデータの再生 | Web Audio APIの基本処理 | WEB SOUNDER - Web Audio API 解説 -

// 参考
// [WEB SOUNDER 概要](http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-basic/overview)  

window.onload = function () {
    // body...
    alert('test_01.js: window.onloadが呼ばれました.');

}

//Create the instance of AudioContext
window.AudioContext = window.AudioContext || window.webkitAudioContext;
//Create the instance of AudioContext
var context = new AudioContext();

//Create the instance of OscillatorNode
var oscillator = context.createOscillator();

//for legacy browsers
context.createGain = context.createGain || context.createGainNode;
//Create the instance of GainNode
var gainNode = context.createGain();

//OscillatorNode (input) -> GainNode -> AudioDestinationNode (output)
oscillator.connect(gainNode);
gainNode.connect(context.destination);


// gain Settiong
gainNode.gain.value = 0.5;  //Set volume at 0.5

// Play Sound
oscPlay();

function oscPlay () {
    // body...
    //for legacy browsers
    oscillator.start = oscillator.start || oscillator.noteOn;
    oscillator.stop  = oscillator.stop  || oscillator.noteOff;
    //Start sound
    oscillator.start(0);
    //Stop sound (after 5 sec)
    window.setTimeout(function(){
        oscillator.stop(0);
    }, 1000);
}

// 参考
// [WEB SOUNDER オーディオデータを再生する](http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-basic/audio)  

window.onload = function () {
    // body...
    alert('test_02.js: window.onloadが呼ばれました.');
}

window.AudioContext = window.AudioContext || window.webkitAudioContext;
//Create the instance of AudioContext
var context = new AudioContext();
var xhr = new XMLHttpRequest();
var url = './media/sample.wav';

//XMLHttpRequest Level 2
xhr.responseType = 'arraybuffer';
// xhrの状態変化時に呼び出される
// http://memopad.bitter.jp/w3c/ajax/ajax_xmlhttprequest_onreadystatechange.html
xhr.onreadystatechange = function(){
    if ((xhr.readyState === xhr.DONE) && (xhr.status === 200)) {
        var arrayBuffer = xhr.response;
        if (arrayBuffer instanceof ArrayBuffer) {
            
    var successCallback = function(audioBuffer){
        /* audioBuffer is the instance of AudioBuffer */

        //Create the instance of AudioBufferSourceNode
        var source = context.createBufferSource();

        //Set the instance of AudioBuffer
        source.buffer = audioBuffer;

        //Set parameters
        source.loop               = false;
        source.loopStart          = 0;
        source.loopEnd            = audioBuffer.duration;
        source.playbackRate.value = 1.0;

        //AudioBufferSourceNode (input) -> AudioDestinationNode (output)
        source.connect(context.destination);

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

        //Start audio
        source.start(0);

        var endedCallback = function(event){
            //Stop audio
            source.stop(0);

            event ? window.alert('STOP by "on' + event.type + '" event handler !!') : window.alert('STOP by "setTimeout" method !!');

            //Audio is not started !!
            //It is necessary to create the instance of AudioBufferSourceNode again

            //source.start(0);
        };

        //The 'onended' event is implemented ?
        if ('onended' in source) {
            source.onended = endedCallback;
        } else if (!source.loop) {
            window.setTimeout(endedCallback, ((source.buffer.duration / source.playbackRate.value) * 1000));
        }
    };

           var errorCallback = function(){
                window.alert('Error : "decodeAudioData" method !!');
            };

            //Create the instance of AudioBuffer (Asynchronously)
            context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
        }
    }
};
xhr.open('GET', url, true);
xhr.send(null);