4

簡単な HTML 範囲入力を使用して Web Audio API オーディオのパンを制御しようとしていますが、オーディオ出力の「位置」を 3 つしか取得できません: -
中央
-左に
100%、右に 100%。

20% が左、80% が右などのように、その間に何かを配置したいと思います...

私が使用しているコードは次のとおりです。

//Creating the node
var pannerNode = context.createPanner();
//Getting the value from the HTML input and using it on the position X value 
document.getElementById('panInput').addEventListener('change', function () {
    pannerNode.setPosition(this.value, 0, 0);
});

そして、それは私の HTML ファイルの次の入力を参照します。

<input id="panInput" type="range" min="-1" max="1" step="0.001" value="0"/>

誰かが私が間違っていることを知っていますか?

4

3 に答える 3

4

2 つのパンナーを使用する必要はありません。パンナーはステレオです。この古い回答は、この質問に対する素晴らしい回答です。

createPanner(); を使用して非常に基本的な左右均等パワー パンを作成する方法。

于 2013-09-06T16:16:46.047 に答える
2

Web Audio API を使用すると、単純な左右のパンニングが難しいことがわかりました。それは本当にサラウンド/空間的なもののために設定されています.

私が通常パンニングを行う方法は次のとおりです。

var panLeft = context.createGain();
var panRight = context.createGain();
var merger = context.createMerger(2);

source.connect(panLeft);
source.connect(panRight);
panLeft.connect(merger, 0, 0);
panRight.connect(merger, 0, 1);
merger.connect(context.destination);

document.getElementById('panInput').addEventListener('change', function () {
  var val = this.value;
  panLeft.gain.value = ( val * -0.5 ) + 0.5;
  panRight.gain.value = ( val * 0.5 ) + 0.5;
});

基本的に、左右のチャンネルとして使用する 2 つのゲイン ノードに信号を送信します。次に、範囲要素から値を取得し、それを使用して各ノードのゲインを設定します。

ただし、これは一種の怠惰なバージョンです。本格的なオーディオ アプリでは、全体的なレベルに変化がないことを確認するために、通常、パンニングにもう少し計算が必要ですが、これで十分に使い始めることができます。

于 2013-09-04T04:22:12.993 に答える
0

それを行うためのより良い簡単な方法があると確信していますが、今のところ、それは間違いなく私にとってうまくいきます.
他の誰かがそれを行うためのより良い/よりクリーンな方法を持っている場合は、ここで共有してください!
このヒントをくれた Kevin Ennis に感謝します!

JavaScript ファイル

//Create a splitter to "separete" the stereo audio data to two channels.
var splitter = context.createChannelSplitter(2);

//Connect your source to the splitter (usually, you will do it with the last audio node before context destination)
audioSource.connect(splitter);

//Create two gain nodes (one for each side of the stereo image)
var panLeft = context.createGain();
var panRight = context.createGain();

//Connect the splitter channels to the Gain Nodes that we've just created
splitter.connect(panRight,0);
splitter.connect(panLeft,1);

//Getting the input data from a "range" input from HTML (the code used on this range will be shown right on the end of this code)
var panPosition = document.getElementById("dispPanPositionLiveInput");
document.getElementById('panControl').addEventListener('change', function () {
  var val = this.value;
  panPosition.value = val;
  panLeft.gain.value = ( val * -0.5 ) + 0.5;
  panRight.gain.value = ( val * 0.5 ) + 0.5;
});

//Create a merger node, to get both signals back together
var merger = context.createChannelMerger(2);

//Connect both channels to the Merger
panLeft.connect(merger, 0, 0);
panRight.connect(merger, 0, 1);

//Connect the Merger Node to the final audio destination (your speakers)
merger.connect(context.destination);

HTMLファイル

< input id="panControl" type="range" min="-1" max="1" step="0.001" value="0"/>

于 2013-09-07T20:28:01.613 に答える