JavaScriptでオーディオビジュアライザーを作る

以下の二つのファイルを作成する

  • test.html
  • test.js

動作環境はFireFox

test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript Sample</title>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function(){main();});</script>
</head>
<body>
<div>
<input id="input_music" type="file" accept="audio/*" onChange="musicFileSelected();">
</div>
<audio id="audio_source" controls></audio>
<canvas id="visualizer" width="1024" height="512"></canvas>
</body>
</html>

test.js

var canvasElement;
var audioElement;
var inputElement;
var canvasContext;
var audioContext;
var sourceNode;
var analyser;
var frequencyData;

var main = function() {
  canvasElement = document.getElementById("visualizer");
  audioElement = document.getElementById("audio_source");
  inputElement = document.getElementById("input_music");
  canvasContext = canvasElement.getContext("2d");
  audioContext = new AudioContext();
  sourceNode = audioContext.createMediaElementSource(audioElement);
  analyser = audioContext.createAnalyser();
  sourceNode.connect(analyser);
  analyser.connect(audioContext.destination);
  frequencyData = new Uint8Array(analyser.frequencyBinCount);
  render();
}

var musicFileSelected = function() {
  var fileList = inputElement.files;
  var file = fileList[0];
  audioElement.src = window.URL.createObjectURL(file);
}

var render = function() {
  analyser.getByteFrequencyData(frequencyData);
  canvasContext.clearRect(0, 0, canvasContext.canvas.width, canvasContext.canvas.height)
  for(i = 0; i < frequencyData.length; i++) {
    canvasContext.beginPath();
    canvasContext.moveTo(i, 300);
    canvasContext.lineTo(i, 300 - frequencyData[i]);
    canvasContext.stroke();
  }
  window.requestAnimationFrame(render.bind(this));
}

実行結果

説明

以前書いたJavaScript記事の集大成
機能単位のオブジェクト化,エラー処理,グローバル変数使用不可等の条件をつけて作っていないため汎用的ではないがシンプル

関連記事

シェアする

  • このエントリーをはてなブックマークに追加

フォローする