7

html5オーディオはすべて非常に新しいものですが、サウンドの左右のバランスを変更する方法はありますか?

このようなもの:

var snd = new Audio("test.mp3");
snd.balance = -1; // only left
snd.play();
4

2 に答える 2

7

これは、AudioWebAPIを使用して可能です

この<audio>要素は、再生/再生の一時停止と音量の変更のみを可能にする非常に基本的なツールです。より複雑な操作が必要な場合は、AudioWebAPIを使用する必要があります

Audio Web APIが機能する方法は、互いにリンクされたノードのグラフ/チェーンを構築することです。一方には、オーディオソースがあります。これは、オーディオファイルまたは自分で生成したオーディオウェーブの場合があります。反対側には、コンピューターのスピーカー/ヘッドフォンとなるオーディオの宛先(オーディオシンク)があります。真ん中には、オーディオを操作するために必要な数のノードを配置できます。たとえば、を使用しGainNodeて音量を制御したり、を使用しSterioPannerNodeて左右のバランスを制御したりできます。

APIは非常に複雑ですが、左/右のバランスを制御するだけで非常に簡単です。

ステップ1-オーディオソースをロードする

<audio>まず、サウンドをロードできるように要素を作成しましょう。XHRリクエストを介してオーディオをロードする場合、または実行時にサウンドを生成する場合は、要素を使用する必要はありません。<audio>

<audio src="myCoolTrack.mp3"></audio>

ステップ2-オーディオコンテキスト

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);

ステップ3ステレオノード

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);

追加の読み物

  • フルAPI:WebオーディオAPI
  • ボリュームとステレオのコントロールを備えた「ブームボックス」を作成する方法のチュートリアル:WebAudioAPIの使用
  • または、ここに動作するデモが表示されます:DEMO

追加の例

この答えはStereoPannerNode、単一のバランスを制御するを使用しAudioNodeます。ただし、オーディオを分割して各チャンネル(左/右)を個別に操作する場合は、とを行う必要がChannelSplitterNodeありChannelMergerNodeます。あなたはここでそれらを使用する方法の完全な例を見つけることができます:https ://stackoverflow.com/a/63272648/2658683

于 2020-07-31T14:17:18.950 に答える
3

2021年現在、これはWebAudioAPIを使用して可能です詳細については、この回答を参照してください。


元の答え:

現在、これはサポートされていません。

サポートされているプロパティとメソッドについては、w3c仕様を確認できます。ブラウザは多くの場合、より多くの/より少ない、または異なるものを提供することに注意してください。ただし、この場合、オーディオバランスの変更をサポートするブラウザはありません。

http://dev.w3.org/html5/spec/Overview.html#audio

于 2011-02-26T09:44:34.013 に答える