勉強中の HTML5 Web Audio API の備忘録を兼ねたブログエントリ記事です。前回はローカルシステム上のオーディオファイルを File API で読み取った上でオーディオバッファに変換して Audio API で再生する、というオーディオ出力処理に挑戦しました。今回は逆にオーディオ入力処理を扱ってみました。具体的にはマイクから入力した音声データをオーディオバッファに変換する処理を調べてみました（コードではオーディオバッファに変換した上で前回同様にそのまま再生させています）。
とりあえず完成形の HTML ファイルは以下のとおりです。「とりあえず」と書いたのは現時点では環境によって動いたり動かなかったりする挙動が見られて、まだ不安定版といった感じな所が理由です。手元の Windows 10 の FireFox および Chrome では動作しましたが Ubuntu 16.04 の FireFox だとエラーになりました：
動かし方としてはこの HTML をファイルに保存し、ウェブブラウザで開きます。サーバー上になくても構いません（ローカルファイルとして開く場合は Ctrl+O でファイルを選択します）。開くと "Rec" と書かれたボタンが１つ表示されるシンプルな画面が表示されます：
この "Rec" ボタンが「録音」ボタンです。このボタンをクリックすると JavaScript の Audio API にマイクの利用を許可するかどうか聞かれるので、「許可」を選択してください：
この時に実行されるコードが以下です。ボタン表示を切り替えると同時に HTML5 Audio API の getUserMedia() を実行してマイクにアクセスします。Web Audio API でマイクを使う時のスタート地点がここになります：
マイクへのアクセスが成功するとボタンの表示が "Rec" から "Stop" に切り替わり、同時に録音モードになります。コンピュータの標準マイクを使って、周りの音の録音が開始されます。またマイクへのアクセス成功時に handleSuccess 関数がコールバック実行され、マイクに入力されたストリーミングデータが引数として渡されます。ここでは onaudioprocess イベントをハンドリングしてチャンネル毎のサンプリングデータを floatData 配列に格納しています。この例ではサンプリングデータを 1024 個ずつ送られてくるようにしていて「その中身が全て 0 ではない（無音データではない）」という確認をした上で配列の最後に追加して、後でまとめて再生できるようにしています：
このタイミングでもう一度 "Stop" をクリックすると録音を終了します：
"Stop" をクリックすると同時にこれまでに配列に集めてきたサンプリングデータをオーディオバッファ・インスタンスに変換します。オーディオバッファ側になれば前回紹介したのと同様の方法で再生できるので、マイクに入力した音声がそのままオウム返しのように再生されます：
いくつかの環境ではこれで録音→再生できることを確認していますが、エラーになる環境もあります。手元で試した限りでは Windows10 の Firefox & Chrome は大丈夫そうで、Ubuntu 16.04 の FireFox はダメそうでした。この辺りはまだよくわかっていないのですが、動く環境があるということは根本的な考え方が間違っていることはないと思っています。
前回のと合わせて、これで音声データをマイクから入力したり、スピーカーから出力したり、という 基本的な I/O 部分を取り扱うレベルのものは作れました。次はサンプリングデータ（波形データ）の中身をもう少し深掘りしてみたいと思ってます。
とりあえず完成形の HTML ファイルは以下のとおりです。「とりあえず」と書いたのは現時点では環境によって動いたり動かなかったりする挙動が見られて、まだ不安定版といった感じな所が理由です。手元の Windows 10 の FireFox および Chrome では動作しましたが Ubuntu 16.04 の FireFox だとエラーになりました：
<html>
<head>
<title>Voice Replay</title>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var processor = null;
var num = 0;
var duration = 0.0;
var length = 0;
var sampleRate = 0;
var floatData = null;
function handleSuccess( stream ){
var source = context.createBufferSource();
var input = context.createMediaStreamSource( stream );
processor = context.createScriptProcessor( 1024, 1, 1 );
input.connect( processor );
processor.onaudioprocess = function( e ){
//. 音声データ
var inputdata = e.inputBuffer.getChannelData(0);
//console.log( inputdata );
if( !num ){
num = e.inputBuffer.numberOfChannels;
floatData = new Array(num);
for( var i = 0; i < num; i ++ ){
floatData[i] = [];
}
sampleRate = e.inputBuffer.sampleRate;
}
var float32Array = e.inputBuffer.getChannelData( 0 );
if( availableData( float32Array ) ){
duration += e.inputBuffer.duration;
length += e.inputBuffer.length;
for( var i = 0; i < num ; i ++ ){
float32Array = e.inputBuffer.getChannelData( i );
Array.prototype.push.apply( floatData[i], float32Array );
}
}
};
processor.connect( context.destination );
}
function startRec(){
$('#recBtn').css( 'display', 'none' );
$('#stopBtn').css( 'display', 'block' );
navigator.mediaDevices.getUserMedia( { audio: true } ).then( handleSuccess );
}
function stopRec(){
$('#recBtn').css( 'display', 'block' );
$('#stopBtn').css( 'display', 'none' );
if( processor ){
processor.disconnect();
processor.onaudioprocess = null;
processor = null;
var audioBuffer = context.createBuffer( num, length, sampleRate );
for( var i = 0; i < num; i ++ ){
audioBuffer.getChannelData( i ).set( floatData[i] );
}
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;
num = 0;
duration = 0.0;
length = 0;
//. オーディオ終了
source.stop( 0 );
console.log( 'audio stopped.' );
};
}
}
function availableData( arr ){
var b = false;
for( var i = 0; i < arr.length && !b; i ++ ){
b = ( arr[i] != 0 );
}
return b;
}
</script>
</head>
<body>
<div id="page">
<div>
<h2>音声再生</h2>
<input type="button" id="recBtn" value="Rec" onClick="startRec();" style="display:block;"/>
<input type="button" id="stopBtn" value="Stop" onClick="stopRec();" style="display:none;"/>
</div>
</div>
</body>
</html>
動かし方としてはこの HTML をファイルに保存し、ウェブブラウザで開きます。サーバー上になくても構いません（ローカルファイルとして開く場合は Ctrl+O でファイルを選択します）。開くと "Rec" と書かれたボタンが１つ表示されるシンプルな画面が表示されます：
この "Rec" ボタンが「録音」ボタンです。このボタンをクリックすると JavaScript の Audio API にマイクの利用を許可するかどうか聞かれるので、「許可」を選択してください：
この時に実行されるコードが以下です。ボタン表示を切り替えると同時に HTML5 Audio API の getUserMedia() を実行してマイクにアクセスします。Web Audio API でマイクを使う時のスタート地点がここになります：
:
function startRec(){
$('#recBtn').css( 'display', 'none' );
$('#stopBtn').css( 'display', 'block' );
navigator.mediaDevices.getUserMedia( { audio: true } ).then( handleSuccess );
}
:
マイクへのアクセスが成功するとボタンの表示が "Rec" から "Stop" に切り替わり、同時に録音モードになります。コンピュータの標準マイクを使って、周りの音の録音が開始されます。またマイクへのアクセス成功時に handleSuccess 関数がコールバック実行され、マイクに入力されたストリーミングデータが引数として渡されます。ここでは onaudioprocess イベントをハンドリングしてチャンネル毎のサンプリングデータを floatData 配列に格納しています。この例ではサンプリングデータを 1024 個ずつ送られてくるようにしていて「その中身が全て 0 ではない（無音データではない）」という確認をした上で配列の最後に追加して、後でまとめて再生できるようにしています：
:
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var processor = null;
var num = 0;
var duration = 0.0;
var length = 0;
var sampleRate = 0;
var floatData = null;
function handleSuccess( stream ){
var source = context.createBufferSource();
var input = context.createMediaStreamSource( stream );
processor = context.createScriptProcessor( 1024, 1, 1 );
input.connect( processor );
processor.onaudioprocess = function( e ){
//. 音声データ
var inputdata = e.inputBuffer.getChannelData(0);
//console.log( inputdata );
if( !num ){
num = e.inputBuffer.numberOfChannels;
floatData = new Array(num);
for( var i = 0; i < num; i ++ ){
floatData[i] = [];
}
sampleRate = e.inputBuffer.sampleRate;
}
var float32Array = e.inputBuffer.getChannelData( 0 );
if( availableData( float32Array ) ){
duration += e.inputBuffer.duration;
length += e.inputBuffer.length;
for( var i = 0; i < num ; i ++ ){
float32Array = e.inputBuffer.getChannelData( i );
Array.prototype.push.apply( floatData[i], float32Array );
}
}
};
processor.connect( context.destination );
}
:このタイミングでもう一度 "Stop" をクリックすると録音を終了します：
"Stop" をクリックすると同時にこれまでに配列に集めてきたサンプリングデータをオーディオバッファ・インスタンスに変換します。オーディオバッファ側になれば前回紹介したのと同様の方法で再生できるので、マイクに入力した音声がそのままオウム返しのように再生されます：
function stopRec(){
$('#recBtn').css( 'display', 'block' );
$('#stopBtn').css( 'display', 'none' );
if( processor ){
processor.disconnect();
processor.onaudioprocess = null;
processor = null;
var audioBuffer = context.createBuffer( num, length, sampleRate );
for( var i = 0; i < num; i ++ ){
audioBuffer.getChannelData( i ).set( floatData[i] );
}
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;
num = 0;
duration = 0.0;
length = 0;
//. オーディオ終了
source.stop( 0 );
console.log( 'audio stopped.' );
};
}
}
いくつかの環境ではこれで録音→再生できることを確認していますが、エラーになる環境もあります。手元で試した限りでは Windows10 の Firefox & Chrome は大丈夫そうで、Ubuntu 16.04 の FireFox はダメそうでした。この辺りはまだよくわかっていないのですが、動く環境があるということは根本的な考え方が間違っていることはないと思っています。
前回のと合わせて、これで音声データをマイクから入力したり、スピーカーから出力したり、という 基本的な I/O 部分を取り扱うレベルのものは作れました。次はサンプリングデータ（波形データ）の中身をもう少し深掘りしてみたいと思ってます。
コメント