まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:html5

楽器苦手なオッサンエンジニアの Web Audio API 勉強シリーズ(!?)、前回はマイクから入力した音声をオーディオバッファ・インスタンスに変換して再生するコードを紹介しました。今回は前回作成したコードを改良して、音声データを折れ線グラフで可視化することに調整してみました。

作成したコードはこんな感じです。前回のものからの差分をで示しています:
<html>
<head>
<title>Audio Buffer Chart</title>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();

window.onload = function(){
}

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 );
  
  //window.dotnsf_hack_for_mozzila = input;
  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.' );
    };
    
    //. floatData[] (の先頭の一部)をグラフ描画する
    var dotnum = 1024;
    var ctx = document.getElementById( 'myChart' ).getContext( '2d' );
    var labels = [];
    var datasets = [];
    var colors = [ "rgba( 255, 0, 0, 0.4 )", "rgba( 0, 0, 255, 0.4 )" ];
    for( var i = 0; i < dotnum; i ++ ){
      labels.push( "" + ( i + 1 ) );
    }
    for( var i = 0; i < num; i ++ ){
      datasets.push({
        label: "data " + i,
        data: floatData[i].slice(1024,1024+dotnum),
        backgroundColor: colors[i%2]
      });
    }
    
    var myChart = new Chart( ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: datasets
      }
    });
  }
}

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>
      <canvas id="myChart"></canvas>
    </div>
  </div>
</body>
</html>

本当は再生する音声データ全てを折れ線グラフとして表示できるとよかったのですが、数10万~数100万個の配列データを扱うことになり、処理がかなり重くなる(見栄えもつまりすぎて折れ線に見えなくなる)ことがわかったので、上記では全データの 1024 個目から 500 個だけ取り出して折れ線グラフにするようなコードにしています(後述のように、このくらいだとかろうじて折れ線に見えます)。

変更点としてはまず HTML ボディ内に折れ線グラフを表示するための canvas 要素を記述しています。そしてこの canvas の中に Chart.js を使って折れ線グラフを描いていきます。今回は Chart.js の CDN を使ってロードしています。

今回の例ではマイクから入力した音声データ(波形データ)は floatData[] 配列に格納しています。入力がモノラルの場合は floatData[0] に、ステレオの場合は floatData[0] (左)と floatData[1] (右)に、それぞれ波形データが配列で格納されます。この中身を折れ線表示すればよいことになります。

※マイクからの入力であれば、このように波形データをあらかじめ配列に格納させておくことができますが、オーディオファイルを再生させる場合であればオーディオバッファ・インスタンスを取得してから
  audioBuffer.getChannelData( n );  ※ n: 0 または 1
を実行することで同じ配列を取り出すことができます。


このコードを実行して、マイクから音声入力するとこんな感じで音声が折れ線グラフ表示されます(以下はモノラルの例):
2018100201


最初はチンプンカンプンでしたが、だんだんオーディオバッファの中身がわかってきました。 v(^o^)


勉強中の HTML5 Web Audio API の備忘録を兼ねたブログエントリ記事です。前回はローカルシステム上のオーディオファイルを File API で読み取った上でオーディオバッファに変換して Audio API で再生する、というオーディオ出力処理に挑戦しました。今回は逆にオーディオ入力処理を扱ってみました。具体的にはマイクから入力した音声データをオーディオバッファに変換する処理を調べてみました(コードではオーディオバッファに変換した上で前回同様にそのまま再生させています)。

とりあえず完成形の 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" と書かれたボタンが1つ表示されるシンプルな画面が表示されます:
2018093001


この "Rec" ボタンが「録音」ボタンです。このボタンをクリックすると JavaScript の Audio API にマイクの利用を許可するかどうか聞かれるので、「許可」を選択してください:
2018093002


この時に実行されるコードが以下です。ボタン表示を切り替えると同時に 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" をクリックすると録音を終了します:
2018093003


"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 部分を取り扱うレベルのものは作れました。次はサンプリングデータ(波形データ)の中身をもう少し深掘りしてみたいと思ってます。




これまでの人生の中で楽器とか音楽全般にあまり縁がなかったこともあって、ソフトウェア開発の中でもオーディオ系のデータを扱う話になると途端にチンプンカンプンでした。HTML5 に Web Audio API が存在していることは知っていましたが、そんな理由で(使おうとしても前提知識がサッパリで付いていけず)ほぼ手付かずでしたが、「苦手科目をなくす」目的でちと勉強を始めてみた経緯をブログで記録していこうと思っています。分かる人からすれば超初心者向けの内容になっていると思いますがお許しを。

とりあえずの題材としてやってみようと思ったのは「オーディオファイルの再生」です。念のため書いておきますが、単にウェブページ内でオーディオファイルを再生することが目的であれば <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 );
    };

      :

とりあえず現時点で理解できたのはここまでです。オーディオバッファの中身をもう少し理解して、波形データとか取り出したり、オーディオファイル以外からの再生もできるようになりたいなあ。。


JavaScript(HTML5) の機能だけで、PC に付属したマイクから音声を入力(つまり PC の前で喋った音声データを取り込む)してみました。なお、この機能を使うには UserMedia に対応したブラウザが必要です。以下のコードは Windows 版の FireFox で動作確認をしています。

サンプルのコードはこんな感じになります:
<html>
<head>
<title>HTML5 Audio</title>
<script type="text/javascript"> 
//. ブラウザによる差異を吸収
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
 
//. バッファサイズ等
var audioContext = new AudioContext();
var bufferSize = 4096;
var cnt = 0;
 
//. 音声処理
function onAudioProcess( e ){
  //. 取得した音声データ
  var input = e.inputBuffer.getChannelData(0);

//. ↑この input に音声データが入っているので、これをストリーミングなどで処理すればよい。
//. 以下は実際にデータが入っていることを確認するためのサンプル処理
//. 音声データの最大・最小値を求める var mx = 0, mn = 0; for( var i = 0; i < bufferSize; i ++ ){ if( mx < input[i] ){ mx = input[i]; } if( mn > input[i] ){ mn = input[i]; } } //. 一度に取得した音声データの最大・最小値を求める(特に意味は無いが、データが取得できている確認) cnt ++; console.log( "[" + cnt + "] min = " + mn + ", max = " + mx ); } //. 音声処理開始 function initialize(){ navigator.getUserMedia( { audio: true }, function( stream ){ //. 音声処理 var javascriptnode = audioContext.createScriptProcessor( bufferSize, 1, 1 ); var mediastreamsource = audioContext.createMediaStreamSource( stream ); window.dotnsf_hack_for_mozzila = mediastreamsource; //. https://support.mozilla.org/en-US/questions/984179 mediastreamsource.connect( javascriptnode ); javascriptnode.onaudioprocess = onAudioProcess; javascriptnode.connect( audioContext.destination ); },function( e ){ console.log( e ); } ); } </script> </head> <body onload="initialize()"> </body> </html>

余談ですが、上記コードの赤字部分は今回一番迷った所。どうも FireFox のバグらしく、取得したメディアストリームがいつの間にか消えて(音声入力処理が止まって)しまう、という現象に遭遇しました。そのバグを回避するため、無理やり取得した値をグローバル変数化して消えないようにしています。バグの詳細についてはこちら:
https://support.mozilla.org/en-US/questions/984179


この HTML をマイク入力を ON にした状態で対象ブラウザで開くと、「PC のマイクをこのアプリと共有しますか?」という確認メッセージが表示されます。ここで「共有」を選択してください:
2016030301

共有すると画面に FireFox がマイクを利用中であること(知らないうちに音声を取得しているわけではないこと)を知らせるマークが表示されます。このマークが出ている間は PC のマイクで拾った音声をこのウェブページで共有していることを表しています:
2016030302


ここで F12 キーを押すとデバッグ画面が表示され、コンソールタブを見ると取得した音声データ1まとまり(4Kbyte)単位での最大値と最小値(簡単にいうと音の大きさ)を表示し続ける、というアプリになっています。
2016030303


実際には取得した音声データを保存(録音)して再生できるようにするとか、ストリーミングで処理してテキスト化するとか、・・・ という使い方になると思いますが、その入力を HTML で行う方法の紹介でした。

243 ゲームをご存知でしょうか?
2015092901


2048 ゲームは(そこそこ)有名だと思いますが、そのクローンゲームです。2048 ゲームは以下のルールで遊ぶものです:
(1) 矢印キーを使って、画面内のタイルを4方向にスライドさせる
(2) 同じ数字のタイルをぶつけると、数字が倍の1つのタイルができる
(3) ぶつけて出来上がったタイルの数字が得点になる(2048 タイルを作ることが1つの目標)


243 は 2048 と異なり、3つの同じ数字を重ねることで1つにまとまります。2048 よりは難易度高くなっています。具体的なルールは以下になります:
(1) 矢印キーを使って、画面内のタイルを4方向にスライドさせる
(2) 同じ数字のタイルを3つぶつけると、数字が3倍の1つのタイルができる
(3) ぶつけて出来上がったタイルの数字が得点になる(243 タイルを作ることが1つの目標)



で、このゲームの HTML5 が Github 上で公開されていました。これを使って IBM Bluemix 上で 243 ゲーム環境を作ってみます(まあ、特にトリッキーなこともないんですが・・)。

まず Bluemix 上に 243 ゲームが動くランタイムを作成します。サーバーサイドで動くモジュールがないので、Github の staticfile ビルドパックを使っても動くと思いますが、Bluemix ダッシュボードから PHP ランタイムを選んでも(事実上 PHP を使わないので、かなり贅沢な環境ですが)動きます。今回は PHP ランタイムを使う方向でいきましょう:
2015092902


並行して 243 ゲームの zip モジュールを GitHub からダウンロードします:
2015092903


ダウンロードした zip モジュールを展開します。index.html が存在するディレクトリがドキュメントルートになります:
2015092904


ここまでできたら、cf コマンドラインツールを使って、このドキュメントルートを PHP ランタイムにプッシュするだけ、です:
# cd (展開した index.html があるディレクトリ) ドキュメントルートへ移動
# cf login -a https://api.ng.bluemix.net/    cf で Bluemix にログイン(米国DCの場合)
# cf push (PHP ランタイムの名前)        cf で Bluemix に 243 ゲームをプッシュ

プッシュが成功したら、PHP ランタイムの URL にブラウザからアクセスすると 243 ゲームが始まります:
2015092905


ぎゃー、惜しかったけど無理。難しい!!

このページのトップヘ