AudioContext: createMediaStreamTrackSource() メソッド

createMediaStreamTrackSource()AudioContext インターフェイスのメソッドで、指定された MediaStreamTrack からデータを受け取る音源を表す MediaStreamTrackAudioSourceNode を作成して返します。

このメソッドが createMediaStreamSource() と異なる点は、指定された MediaStream の中の id が辞書順(アルファベット順)で最初の音声トラックからデータを受け取る MediaStreamAudioSourceNode を作成する点です。

構文

js
createMediaStreamTrackSource(track)

引数

track

新しいノードのすべての音声データの取得元として使用する MediaStreamTrack です。

返値

指定の音声トラックから得られる音声データの取得元として働く MediaStreamTrackAudioSourceNode オブジェクトを返します。

この例では、ユーザーのマイクへのアクセスを要求するために getUserMedia() を使います。アクセスができるようになると、音声コンテキストを作成し、getUserMedia() が返したストリームの最初の音声トラックから音声を取得する MediaStreamTrackAudioSourceNodecreateMediaStreamTrackSource() により作成します。

そして、createBiquadFilter() により BiquadFilterNode (en-US) を作成し、音源から流れてくる音声にローシェルフフィルターを適用するように意図通り設定します。すると、マイクからの出力が新しいバイクワッドフィルターに流れ、フィルターの出力が音声コンテキストの出力先 (destination) に順に流れるようになります。

js
navigator.mediaDevices
  .getUserMedia({ audio: true, video: false })
  .then((stream) => {
    audio.srcObject = stream;
    audio.onloadedmetadata = (e) => {
      audio.play();
      audio.muted = true;
    };

    const audioCtx = new AudioContext();
    const audioTracks = stream.getAudioTracks();
    const source = audioCtx.createMediaStreamTrackSource(audioTracks[0]);

    const biquadFilter = audioCtx.createBiquadFilter();
    biquadFilter.type = "lowshelf";
    biquadFilter.frequency.value = 3000;
    biquadFilter.gain.value = 20;

    source.connect(biquadFilter);
    biquadFilter.connect(audioCtx.destination);
  })
  .catch((err) => {
    // getUserMedia() のエラーを処理する
  });

仕様書

Specification
Web Audio API
# dom-audiocontext-createmediastreamtracksource

ブラウザーの互換性

BCD tables only load in the browser

関連情報