We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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() の定義
草案  

ブラウザ互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,