JavaScriptで音楽にエフェクトをかける

手順

以下の二つのファイル

  • test.html
  • test.js

を作成し、上記ファイルと同一のフォルダに

  • music.mp3(適当な曲を用意する)

を配置する

※以下のサンプルは実行すると音楽が再生されるため音量には注意

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>
<body>
</head>
</body>
</html>

test.js

var main = function() {
  var audioElement = document.createElement('audio');
  audioElement.src = 'music.mp3';
  audioElement.play();

  var ctx = new AudioContext();
  var biquadFilter = ctx.createBiquadFilter();
  var sourceNode = ctx.createMediaElementSource(audioElement);
  sourceNode.connect(biquadFilter);
  biquadFilter.connect(ctx.destination);
}

説明

Web Audio API を利用して音楽にエフェクトをかける

MediaElementAudioSourceNode

AudioContext.createMediaElementSource() に引数として HTMLAudioElement を渡すことで HTMLAudioElement の出力を MediaElementAudioSourceNode にすることがでできる
HTMLAudioElement で 再生,停止の操作は可能なため MediaElementAudioSourceNode に start() と stop() はついていない

BiquadFilterNode

音声にフィルタをかけるノード
デフォルトが350Hzを閾値としたローパスフィルタになっているので上記コードでは高音がカットされてこもった音になる

connect

MediaElementAudioSourceNode (音源) → BiquadFilterNode (ローパスフィルタ) → AudioContext.destination(スピーカー)

参考

デジらくだブログ : JavaScriptで音楽を再生する
MDN Web Docs : MediaElementAudioSourceNode
MDN Web Docs : BiquadFilterNode

シェアする

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

フォローする