HOME > MIDI/AUDIO LAB

Web MIDI API 実験室

Web Audio APIでオーディオファイル(MP3/WAV)を読んで再生


2020.9.6

http://www.html5rocks.com/ja/tutorials/webaudio/intro/ を参考にさせていただきました。
まず、File Loadボタンを押してください。その後で、再生ボタンを押してください。
再生ボタンを押すと、音が鳴りますのでコンピュータのボリュームの調整をお願いします。

File Load


MP3フォーマット


Wavフォーマット


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://haramikata.jougennotuki.com/Audio1/xxxx.mp3",0);
        loadDogSound("https://haramikata.jougennotuki.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) {
        //n番目のバッファーにデータを読み込む
        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);
    //2重再生を防ぐために再生中フラグを上げる
    playflag=1;
}

function stopSound(){
    //再生停止
    audioSource.stop(0);
    //stopすると、次に再生する時にオーディオソースは
クリエイトしなおさなければならない!!
//再生中フラグを下げる playflag=0; } function playSoundA(n) { //n番目のバッファーを再生する playSound(mAudioBuffer[n]); }

LOG







Copyright © Mikata Hawa 2015-2020
fabercastell679@yahoo.com