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

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

タグ:chart

楽器苦手なオッサンエンジニアの 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^)


Chart.js は棒グラフや折れ線グラフなどの各種グラフやチャートを描画するための JavaScript ライブラリです。グラフを描くだけならかなり簡単に使うことができて便利です。また MIT ライセンスが採用されており、商用を含めた柔軟な利用が可能になっています。

今回はこの Chart.js を使って「ポーラーチャート」を作る例を紹介します:
ogp


ポーラーチャートは円グラフやドーナツグラフに似ています。円グラフやドーナツグラフでは円全体を 100% と見なして、その中の割合を(色別などに)分類表示する、というものです。 一方ポーラーチャートでは量が多いほど大きな面積で表示されます。存在している要素が全て同じ角度を持ったパイの形で表示されるため、仮に特定の要素の値がゼロでもゼロであることがわかりやすくなっている(※)という特徴があります。

※上図の例だと左上に紫色っぽい部分がほんの少しだけ存在しています。量が少なくてグラフ上ではほぼ見えていないのですが、ここに空間ができることで少なくともここにデータが存在していることが明確になっています。


このポーラーチャートを Chart.js で表示するには以下のようなコードを記述します。Chart 作成時の type 属性に 'polarArea' を指定することでポーラーチャートを描画します:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>

  :
  :

<canvas id="myChart"></canvas>

  :
  :

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart( ctx, {
  type: 'polarArea',
  data: {
    labels: [ "Red", "Yellow", "Green", "Cyan", "Blue", "Magenta" ],
    datasets: [{
      backgroundColor: [
        "#ff0000",
        "#ffff00",
        "#00ff00",
        "#00ffff",
        "#0000ff",
        "#ff00ff"
      ],
      data: [ 150, 100, 20, 80, 40, 5 ]
    }]
  }
});
</script>

  :
  :


この内容を実際にこのページ内に埋め込むと以下のようになります:


縦や横の積み上げ式の棒グラフに近い用途で使え、かつ最小値が小さくて、積み上げた時に潰れてしまうようなケースでもデータとしての存在を明確にできる、という特徴を持ったチャートだと思っています。

Chart.js は棒グラフや折れ線グラフなどの各種グラフやチャートを描画するための JavaScript ライブラリです。グラフを描くだけならかなり簡単に使うことができて便利です。また MIT ライセンスが採用されており、商用を含めた柔軟な利用が可能になっています。

今回はこの Chart.js を使って円グラフを作る例を紹介します:
2018030900


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>

  :
  :

<canvas id="myChart"></canvas>

  :
  :

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart( ctx, {
  type: 'pie',
  data: {
    labels: [ "Red", "Green", "Blue" ],
    datasets: [{
      backgroundColor: [
        "#ff0000",
        "#00ff00",
        "#0000ff"
      ],
      data: [ 150, 100, 20 ]
    }]
  }
});
</script>

  :
  :

キャンバスの 2D コンテキストを取得し、グラフ種類、ラベル、色、そして数値データを指定して描画しています。上記コードの "pie" という部分が円グラフを指定しており、ここを変更することで円グラフ以外のチャートを作ることもできます。

この内容を実際にこのページ内に埋め込むと以下のようになります: 




なんとなく直感的にというか、 ウェブで簡単に使えるグラフ描画ライブラリだと思ってます。

このページのトップヘ