これまでの人生の中で楽器とか音楽全般にあまり縁がなかったこともあって、ソフトウェア開発の中でもオーディオ系のデータを扱う話になると途端にチンプンカンプンでした。HTML5 に Web Audio API が存在していることは知っていましたが、そんな理由で（使おうとしても前提知識がサッパリで付いていけず）ほぼ手付かずでしたが、「苦手科目をなくす」目的でちと勉強を始めてみた経緯をブログで記録していこうと思っています。分かる人からすれば超初心者向けの内容になっていると思いますがお許しを。
とりあえずの題材としてやってみようと思ったのは「オーディオファイルの再生」です。念のため書いておきますが、単にウェブページ内でオーディオファイルを再生することが目的であれば <audio> タグを使うのが（ブラウザやバージョンの違いなどを意識することもなく）簡単だということは理解しています：
これと同じ、または近いことを <audio> タグを使わずに HTML5 の Web Audio API だけで実現することを最初の目標にしてみました。で、作ってみたのがこちらです：
まず最初に、こちらを作っていて今回のテーマ内であっても <audio> タグでできることとできないことがあることに気づきました。<audio> タグでオーディオファイルを再生するには、そのオーディオファイルは（ファイル場所を src 属性で指定する必要があるため）この HTML ファイルが存在するサーバー上か、または HTTP(S) で取得できる場所に存在している必要があります。一方、オーディオファイルが手元の PC 内にある場合はあらかじめそのファイルをサーバー上にコピーしておかないと <audio> タグで指定できるようにはなりません。そのような場合であれば（上記で作成したように）HTML5 の File API を併用して手元のファイルを読み取り、オーディオバッファを取り出して Web Audio API に渡して再生することで実現できます。というわけで、実際にそのような挙動をする例を作ってみました。
<input type="file" accept="audio/*"/> のコントロールにオーディオファイル（MP3 ファイル）を指定するとイベントリスナーで定義された部分がハンドリングして、オーディオファイルであることを確認した上で以下の処理が実行されます：
FileReader インスタンスを作成して readAsArrayBuffer() メソッドを実行し、アップロード指定したファイルを（アップロードせずにローカルで）読み取ります。読み取りが完了すると reader.onload イベントハンドラによって読み取り結果（reader.result）を取り出して、loadAudio() 関数を実行しています。
loadAudio() 関数内では読み取った ArrayBuffer に対して AudioContext の decodeAudioData() 関数を実行してオーディオバッファのインスタンスを生成します。生成に成功したらオーディオコンテキストからバッファソースを作って（createBufferSource()）、オーディオバッファの実体等の属性を指定して、出力先に接続（connect()）して、再生を開始（start()）します：
とりあえず現時点で理解できたのはここまでです。オーディオバッファの中身をもう少し理解して、波形データとか取り出したり、オーディオファイル以外からの再生もできるようになりたいなあ。。
とりあえずの題材としてやってみようと思ったのは「オーディオファイルの再生」です。念のため書いておきますが、単にウェブページ内でオーディオファイルを再生することが目的であれば <audio> タグを使うのが（ブラウザやバージョンの違いなどを意識することもなく）簡単だということは理解しています：
<audio controls> <source type="audio/mp3" src="./xxxx.mp3"/> </audio>
これと同じ、または近いことを <audio> タグを使わずに HTML5 の Web Audio API だけで実現することを最初の目標にしてみました。で、作ってみたのがこちらです：
<html>
<head>
<title>Audio File Play</title>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
window.onload = function(){
if( ( document.readyState == 'interactive' ) || ( document.readyState == 'complete' ) ){
onDOMContentLoaded();
}else{
document.addEventListener( 'DOMContentLoaded', onDOMContentLoaded, true );
}
function onDOMContentLoaded(){
function loadAudio( node ){
var successCallback = function( audioBuffer ){
console.log( audioBuffer );
var source = context.createBufferSource();
source.buffer = audioBuffer; //. オーディオデータの実体（AudioBuffer インスタンス）
source.loop = false; //. ループ再生するか？
source.loopStart = 0; //. オーディオ開始位置（秒単位）
source.loopEnd = audioBuffer.duration; //. オーディオ終了位置（秒単位）
source.playbackRate.value = 1.0; //. 再生速度＆ピッチ
source.connect( context.destination );
//. for lagacy browsers
source.start( 0 );
source.onended = function( event ){
//. イベントハンドラ削除
source.onended = null;
document.onkeydown = null;
//. オーディオ終了
source.stop( 0 );
console.log( 'audio stopped.' );
};
};
var errorCallback = function( error ){
if( error instanceof Error ){
window.alert( error.message );
}else{
window.alert( 'Error: "decodeAudioData"');
}
};
//. オーディオバッファインスタンス作成
context.decodeAudioData( node, successCallback, errorCallback );
};
document.querySelector( '[type="file"]' ).addEventListener( 'change', function( event ){
var uploader = this;
var file = event.target.files[0];
if( !( file instanceof File ) ){
window.alert( 'Error: Please upload file.' );
}else if( file.type.indexOf( 'audio' ) == -1 ){
window.alert( 'Error: Please upload audio file.' );
}else{
var reader = new FileReader();
reader.onprogress = function( event ){
};
reader.onerror = function(){
window.alert( 'Error: FileReader(' + reader.error.code + ')' );
uploader.value = '';
};
reader.onload = function(){
var arrayBuffer = reader.result; //. ArrayBuffer（Web Audio API では Float32Array 型配列）
loadAudio( arrayBuffer );
};
reader.readAsArrayBuffer( file );
}
}, false );
}
}
</script>
</head>
<body>
<div id="page">
<div>
<h2>オーディオファイルローダー</h2>
<input type="file" accept="audio/*"/>
</div>
</div>
</body>
</html>
まず最初に、こちらを作っていて今回のテーマ内であっても <audio> タグでできることとできないことがあることに気づきました。<audio> タグでオーディオファイルを再生するには、そのオーディオファイルは（ファイル場所を src 属性で指定する必要があるため）この HTML ファイルが存在するサーバー上か、または HTTP(S) で取得できる場所に存在している必要があります。一方、オーディオファイルが手元の PC 内にある場合はあらかじめそのファイルをサーバー上にコピーしておかないと <audio> タグで指定できるようにはなりません。そのような場合であれば（上記で作成したように）HTML5 の File API を併用して手元のファイルを読み取り、オーディオバッファを取り出して Web Audio API に渡して再生することで実現できます。というわけで、実際にそのような挙動をする例を作ってみました。
<input type="file" accept="audio/*"/> のコントロールにオーディオファイル（MP3 ファイル）を指定するとイベントリスナーで定義された部分がハンドリングして、オーディオファイルであることを確認した上で以下の処理が実行されます：
:
document.querySelector( '[type="file"]' ).addEventListener( 'change', function( event ){
var uploader = this;
var file = event.target.files[0];
if( !( file instanceof File ) ){
window.alert( 'Error: Please upload file.' );
}else if( file.type.indexOf( 'audio' ) == -1 ){
window.alert( 'Error: Please upload audio file.' );
}else{
var reader = new FileReader();
reader.onprogress = function( event ){
};
reader.onerror = function(){
window.alert( 'Error: FileReader(' + reader.error.code + ')' );
uploader.value = '';
};
reader.onload = function(){
var arrayBuffer = reader.result;
loadAudio( arrayBuffer );
};
reader.readAsArrayBuffer( file );
}
}, false );
:
FileReader インスタンスを作成して readAsArrayBuffer() メソッドを実行し、アップロード指定したファイルを（アップロードせずにローカルで）読み取ります。読み取りが完了すると reader.onload イベントハンドラによって読み取り結果（reader.result）を取り出して、loadAudio() 関数を実行しています。
loadAudio() 関数内では読み取った ArrayBuffer に対して AudioContext の decodeAudioData() 関数を実行してオーディオバッファのインスタンスを生成します。生成に成功したらオーディオコンテキストからバッファソースを作って（createBufferSource()）、オーディオバッファの実体等の属性を指定して、出力先に接続（connect()）して、再生を開始（start()）します：
:
function loadAudio( node ){
var successCallback = function( audioBuffer ){
console.log( audioBuffer );
var source = context.createBufferSource();
source.buffer = audioBuffer; //. オーディオデータの実体（AudioBuffer インスタンス）
source.loop = false; //. ループ再生するか？
source.loopStart = 0; //. オーディオ開始位置（秒単位）
source.loopEnd = audioBuffer.duration; //. オーディオ終了位置（秒単位）
source.playbackRate.value = 1.0; //. 再生速度＆ピッチ
source.connect( context.destination );
//. for lagacy browsers
source.start( 0 );
source.onended = function( event ){
//. イベントハンドラ削除
source.onended = null;
document.onkeydown = null;
//. オーディオ終了
source.stop( 0 );
console.log( 'audio stopped.' );
};
};
var errorCallback = function( error ){
if( error instanceof Error ){
window.alert( error.message );
}else{
window.alert( 'Error: "decodeAudioData"');
}
};
//. オーディオバッファインスタンス作成
context.decodeAudioData( node, successCallback, errorCallback );
};
:
とりあえず現時点で理解できたのはここまでです。オーディオバッファの中身をもう少し理解して、波形データとか取り出したり、オーディオファイル以外からの再生もできるようになりたいなあ。。
