AudioContext.createStereoPanner()

AudioContextインターフェースのcreateStereoPanner()メソッドは、音源にステレオパンニングを適用するStereoPannerNodeを生成します。入力されたオーディオストリームは、低コストなequal-powerパンニングアルゴリズムで位置が決められます。

構文

var audioCtx = new AudioContext();
var panNode = audioCtx.createStereoPanner();

戻り値

StereoPannerNode

このStereoPannerNodeサンプル(ソースコード)のHTMLには、<audio>要素と、パン値を増減させるスライダーinputしかありません。JavaScpriptでは、MediaElementAudioSourceNodeStereoPannerNodeを生成し、この2つをconnect()メソッドで接続しています。そして、スライダーを動かすと、oninputイベントハンドラでStereoPannerNode.panパラメータの値を変更し、ディスプレイのパン値を更新しています。

スライダーを左から右に動かすと、音楽のスピーカーからの出力が左から右にパンされます。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');

var panControl = document.querySelector('.panning-control');
var panValue = document.querySelector('.panning-value');

pre.innerHTML = myScript.innerHTML;

// MediaElementAudioSourceNodeを生成し、そこにHTMLMediaElementを入れる
var source = audioCtx.createMediaElementSource(myAudio);

// ステレオパンナーを生成する
var panNode = audioCtx.createStereoPanner();

// イベントハンドラ関数で、スライダーが動いたとき左右のパンの値を左右する

panControl.oninput = function() {
  panNode.pan.value = panControl.value;
  panValue.innerHTML = panControl.value;
}

// AudioBufferSourceNodeをpanNodeに接続し、panNodeを行き先(destination)に接続する
// これでこのコントロールで音楽をパンを調整することができる
source.connect(panNode);
panNode.connect(audioCtx.destination);

仕様

Specification Status Comment
Web Audio API
createStereoPanner() の定義
草案  

ブラウザ互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 42.0 37.0 (37.0)  未サポート 未サポート 未サポート
Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未サポート 37.0 2.2 未サポート 未サポート 未サポート (有)

参考

ドキュメントのタグと貢献者

このページの貢献者: maruhiro
最終更新者: maruhiro,