StereoPannerNode の shim をつくった

なんかカンファレンスとかあって一部で非常に盛り上がっているっぽいウェブオーディオ界隈ですが、そろそろ Chrome あたりに StereoPannerNode というのがやってきそうな気配があります。

今のウェブオーディオで音の定位を扱うには PannerNode というのがあるのですが、なぜか3D空間に音を配置するみたいな超高級な仕様で、パンといえばミキサーについているつまみくらいの感覚の一般市民には使いにくかったりします。

で、新しくステレオ定位を扱う StereoPannerNode というのが検討されています。

http://webaudio.github.io/web-audio-api/#the-stereopannernode-interface

interface StereoPannerNode : AudioNode {
  readonly attribute AudioParam pan;
};

見てのとおりインターフェースは単純で、pan 属性があるのみ。-1 で左、0 で真ん中、+1 で右という按配です。 なるほど分かった簡単だし便利そうだ。ですが、代替できる仕組みがないとすべてのブラウザに実装されるまで使いたくないというのもあるので、今のウェブオーディオだけで作ってみた。

使い方

• デモ

<script src="/path/to/stereo-panner-shim.js"></script>

これで AudioContext.prototype.createStereoPanner が使えるようになります。

var audioContext = new AudioContext();
var audioElement = document.getElementById("audioElement");

var mediaSource = audioContext.createMediaElementSource(audioElement);
var autoPanRate = audioContext.createOscillator();
var autoPanAmount = audioContext.createGain();
var stereoPanner = audioContext.createStereoPanner(); // これが新しく使える

autoPanRate.frequency.value = 0.05;
autoPanRate.start(audioContext.currentTime);

mediaSource.connect(stereoPanner); // 普通に接続して使います
autoPanRate.connect(autoPanAmount);
autoPanAmount.connect(stereoPanner.pan);
stereoPanner.connect(audioContext.destination);

仕組み

既存のオーディオノードをごちゃごちゃ組み合わせてやっています。詳細はここの README を参照してください。

mohayonao/stereo-panner-node · GitHub