html5オーディオはすべて非常に新しいものですが、サウンドの左右のバランスを変更する方法はありますか?
このようなもの:
var snd = new Audio("test.mp3");
snd.balance = -1; // only left
snd.play();
html5オーディオはすべて非常に新しいものですが、サウンドの左右のバランスを変更する方法はありますか?
このようなもの:
var snd = new Audio("test.mp3");
snd.balance = -1; // only left
snd.play();
この<audio>
要素は、再生/再生の一時停止と音量の変更のみを可能にする非常に基本的なツールです。より複雑な操作が必要な場合は、AudioWebAPIを使用する必要があります
Audio Web APIが機能する方法は、互いにリンクされたノードのグラフ/チェーンを構築することです。一方には、オーディオソースがあります。これは、オーディオファイルまたは自分で生成したオーディオウェーブの場合があります。反対側には、コンピューターのスピーカー/ヘッドフォンとなるオーディオの宛先(オーディオシンク)があります。真ん中には、オーディオを操作するために必要な数のノードを配置できます。たとえば、を使用しGainNode
て音量を制御したり、を使用しSterioPannerNode
て左右のバランスを制御したりできます。
APIは非常に複雑ですが、左/右のバランスを制御するだけで非常に簡単です。
<audio>
まず、サウンドをロードできるように要素を作成しましょう。XHRリクエストを介してオーディオをロードする場合、または実行時にサウンドを生成する場合は、要素を使用する必要はありません。<audio>
<audio src="myCoolTrack.mp3"></audio>
AudioContext
を作成して、要素からコンテキストオブジェクトにオーディオをロードしましょう
// for legacy browsers
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
// get the audio element
const audioElement = document.querySelector('audio');
// pass it into the audio context
const track = audioContext.createMediaElementSource(audioElement);
StereoPannerNode
バランスをコントロールするを作成しましょう
// default pan set to 0 - center
const stereoNode = new StereoPannerNode(audioContext, { pan: 0 });
// change the value of the balance by updating the pan value
stereoNode.pan.value = -1; // left
stereoNode.pan.value = 0; // center
stereoNode.pan.value = 1; // right
すべてのノードを単一のグラフ/チェーンに接続します。入力ノード(オーディオソース)と出力ノード(スピーカー/ヘッドホン)を使用します。ボリューム、フィルタリングなどの他のオーディオ操作のために、中央にノードを追加できます。
track.connect(stereoNode).connect(audioContext.destination);
この答えはStereoPannerNode
、単一のバランスを制御するを使用しAudioNode
ます。ただし、オーディオを分割して各チャンネル(左/右)を個別に操作する場合は、とを行う必要がChannelSplitterNode
ありChannelMergerNode
ます。あなたはここでそれらを使用する方法の完全な例を見つけることができます:https ://stackoverflow.com/a/63272648/2658683
元の答え:
現在、これはサポートされていません。
サポートされているプロパティとメソッドについては、w3c仕様を確認できます。ブラウザは多くの場合、より多くの/より少ない、または異なるものを提供することに注意してください。ただし、この場合、オーディオバランスの変更をサポートするブラウザはありません。