Web Audio APIの使い方

Web Audio APIでオーディオファイル（MP3/WAV）を読んで再生するプログラムを紹介します。http://www.html5rocks.com/ja/tutorials/webaudio/intro/ を参考にさせていただきました。

このページでは、オーディオファイルを再生します。まず、File Loadボタンを押してください。再生するファイルを読み込みます。ファイルの読み込みが成功すると"file load compleated"とポップアップが表示されます。ポップアップのOKボタンを押して下さい。その後で、再生ボタンを押してください。再生ボタンを押すと、音が鳴りますので再生ボタンを押す前に、コンピュータのボリュームの調整をお願いします。

その下のLEFT GAIN, RIGHT GAINは左右の音量を調整します。0で音が出なくなります。1で最大音量となります。

File Load

Load

MP3フォーマット

再生 STOP

Wavフォーマット

再生 STOP

LEFT GAIN:

RIGHT GAIN:

プログラム

var audioContext=null;
var mAudioBuffer= [null,null];
var gainL;
var gainR;
var splitter;
var merger;
var audioSource;
var playflag=0;

//自動でAudioContextを作成しない方が良い
//window.addEventListener('load', init, false);

function init() {
    try {
    // Audio Context
        if (typeof AudioContext == "function") {
            audioContext = new AudioContext();
        } else if (typeof webkitAudioContext == "function") {
            audioContext = new webkitAudioContext();
        }

        // Gain Node for both channel
        gainL = audioContext.createGain();
        gainR = audioContext.createGain();
        gainL.gain.value = 1.0;
        gainR.gain.value = 1.0;
        //Spliter and Merger
        splitter = audioContext.createChannelSplitter(2);
        merger = audioContext.createChannelMerger(2);
        //Load Files
        loadDogSound("https://webmidiaudio.com/Audio1/xxxx.mp3",0);
        loadDogSound("https://webmidiaudio.com/Audio1/yyyy.wav",1);
    }
    catch(e) {
        alert('Web Audio API is not supported in this browser');
    }
}

//urlに置かれているファイルを読み込む
function loadDogSound(url, n) {　
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

// Decode asynchronously
    //ゆっくりデコード
    request.onload = function() { 　
        audioContext.decodeAudioData(request.response, function(buffer) {
        //ｎ番目のバッファーにデータを読み込む
        mAudioBuffer[n]= buffer; 　
        }, function(){ alert('Error'); } );
    }
    request.send();
}

function playSound(buffer) {
    //audioContextがnullなら、audioContextを生成する
    if(audioContext==null) init();
    //もし、再生中なら止める
    if(playflag!=0) audioSource.stop(0);
    //オーディオソースをクリエイトする
    audioSource = audioContext.createBufferSource();
    //オーディオソースのバッファーに、再生バッファーをつなぐ
    audioSource.buffer = buffer;
    //audiosourceを、スプリッターにつなぐ
    audioSource.connect(splitter); 
    //スプリッターのゼロ番目の出力をgainLにつなぐ
    splitter.connect(gainL, 0);
    //スプリッターのイチ番目の出力をgainRにつなぐ
    splitter.connect(gainR, 1);
    //gainLのゼロ番目の出力をmergerのゼロ番目の入力につなぐ
    gainL.connect(merger, 0, 0);
    //gainRのゼロ番目の出力をmergerのイチ番目の入力につなぐ
    gainR.connect(merger, 0, 1);
    //mergerの出力をスピーカにつなぐ
    merger.connect(audioContext.destination);
    //再生スタート
    audioSource.start(0);
    //２重再生を防ぐために再生中フラグを上げる
    playflag=1;
}

function stopSound(){
    //再生停止
    audioSource.stop(0);
    //stopすると、次に再生する時にオーディオソースは
クリエイトしなおさなければならない！！
    //再生中フラグを下げる
    playflag=0;
}

function playSoundA(n) {
    //ｎ番目のバッファーを再生する
    playSound(mAudioBuffer[n]);
}