手順
以下の二つのファイル
- 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