36
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Web Audio APIを利用してオーディオビジュアライザを作成する ~その1 音声データを読み込んで音を出す~

Last updated at Posted at 2016-02-05

Web Audio APIを利用してオーディオビジュアライザを制作したので、それに関する備忘録です。
まとめて書くと内容が長くなり、複雑で解りにくなりそうなので分けて書いています。

その1は簡単な概要と音声データを読み込んで音を出すところまでです。

Web Audio APIとは

  • Audioを扱うAPI。
  • AudioNodeを接続して、音(信号)に対して様々な操作ができる。

AudioNodeとは

音量の調整、周波数の解析、フィルタをかけたりと音(信号)に対して様々な操作ができるノード。(モジュールのようなもの)
AudioNodeはいくつでも接続することができ、最終的にはAudioDestinationNode(出力)に接続して音を出す。
現実世界で言うとマイク(入力)、エフェクタ(フィルタ)、スピーカー(出力)をコードで繋げていくのと同じ。

とりあえず音を出す

デモ(ページを開くと音が流れるので音量注意)

以下のノードを接続して音を出す。

OscillatorNode (入力)

指定した周波数、波形の音(音源)を生成するノード

GainNode (フィルタ)

音量を調整するノード

AudioDestinationNode (出力)

音の出力先(スピーカー)となるノード

ディレクトリ構成

.
├── index.html
└── audio.js

index.html

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>とりあえず音を出す</title>
</head>
<body>
<script src="audio.js"></script>
</body>
</html>

audio.js

audio.js
// AudioNodeを管理するAudioContextの生成
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

var oscillatorNode = audioCtx.createOscillator();  // OscillatorNode(入力、音源)を作成
var gainNode = audioCtx.createGain();              // GainNode(フィルタ)を作成
gainNode.gain.value = 0.5;                         // 音量を小さくする
oscillatorNode.connect(gainNode);                  // oscillatorNodeをgainNodeに接続
gainNode.connect(audioCtx.destination);            // gainNodeをAudioDestinationNode(出力)に接続
oscillatorNode.start(0);                           // 再生開始

GainNodeを介しているので、本来より音量が小さくなった音がでる。

#音声データを読み込んで音を出す
デモ(ページを開くと音が流れるので音量注意)

音声データを読み込み、以下のノードを接続して音を出す。

AudioBufferSourceNode (入力)

指定したバッファ(音声データ)を音源に設定するノード

AudioDestinationNode (出力)

音の出力先(スピーカー)となるノード

ディレクトリ構成

.
├── index.html
├── audio.js
└── sample.mp3

index.html

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音声データを読み込んで音を出す</title>
</head>
<body>
<script src="audio.js"></script>
</body>
</html>

audio.js

audio.jsは以下のような処理になる。

  • XMLHttpRequestを利用して音声データ(バッファ)を読み込む。
  • 読み込み完了後、取得したデータをデコードし、それをAudioBufferSourceNodeで音源に設定する。
  • AudioBufferSourceNodeAudioDestinationNodeに接続し、再生する。
audio.js
// AudioNodeを管理するAudioContextの生成
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

var Loader = function(url) {
  this.url = url;  // 読み込む音声データのURL
};

// XMLHttpRequestを利用して音声データ(バッファ)を読み込む。
Loader.prototype.loadBuffer = function() {
  var loader, request;
  loader = this;
  request = new XMLHttpRequest();
  request.open('GET', this.url, true);
  request.responseType = 'arraybuffer';

  request.onload = function() {
    // 取得したデータをデコードする。
    audioCtx.decodeAudioData(this.response, function(buffer) {
      if (!buffer) {
        console.log('error');
        return;
      }
      loader.playSound(buffer);  // デコードされたデータを再生する。
    }, function(error) {
      console.log('decodeAudioData error');
    });
  };

  request.onerror = function() {
    console.log('Loader: XHR error');
  };

  request.send();
};

// 読み込んだ音声データ(バッファ)を再生する。
Loader.prototype.playSound = function(buffer) {
  var sourceNode = audioCtx.createBufferSource(); // AudioBufferSourceNode(入力)を作成
  sourceNode.buffer = buffer;                     // 取得した音声データ(バッファ)を音源に設定
  sourceNode.connect(audioCtx.destination);       // AudioBufferSourceNodeをAudioDestinationNode(出力)に接続
  sourceNode.start(0);                            // 再生開始
};

var loader = new Loader('sample.mp3');
loader.loadBuffer();

終わり

その2では再生中の音から波形データを取得してcanvasに描画してみます。
理解が曖昧な気もするため、認識が間違っている場合、ご指摘ください。

関連

参考

36
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?