AudioContext.createMediaStreamSource()

インターフェースのcreateMediaStreamSource()メソッドは、指定のメディアストリームから(言い換えるとnavigator.getUserMediaインスタンスから)MediaStreamAudioSourceNodeオブジェクトを生成します。ここからの音声は再生や編集ができます。

メディアストリームオーディオソースノードの詳細はMediaStreamAudioSourceNodeのページを参照してください。

構文

var audioCtx = new AudioContext();
var source = audioCtx.createMediaStreamSource(stream);

引数

stream: 操作のためにオーディオグラフに加えたいMediaStreamオブジェクト。

この例では、メディア(音声+映像)ストリームをnavigator.getUserMediaから獲得し、それを<video>要素に渡し、映像は再生しますが音声は再生しないようにします。音声はMediaStreamAudioSourceNodeに渡します。次に、音声をローパスフィルタBiquadFilterNode (en-US)(低音を強めるように働きます)に渡し、そしてAudioDestinationNodeに渡します。

<video>要素の下のスライダーはローパスフィルタの増幅量を操作します—スライダーで値を大きくすると、より低音が強くなります!

メモ: この例の実行とソースの閲覧もできます。

// プレフィックスが必要な場合を考慮して、getUserMediaはブラウザのバージョンごとに分ける

navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia ||
  navigator.msGetUserMedia;

// 他の変数を定義する

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector("audio");
var pre = document.querySelector("pre");
var video = document.querySelector("video");
var myScript = document.querySelector("script");
var range = document.querySelector("input");

// マウスポインタのY座標と、画面の高さを格納する変数を定義する
var CurY;
var HEIGHT = window.innerHeight;

// getUserMediaのブロック - ストリームを得る
// MediaStreamAudioSourceNodeに渡す
// 映像はvideo要素に出力する

if (navigator.getUserMedia) {
  console.log("getUserMedia supported.");
  navigator.getUserMedia(
    // 制約: このアプリで音声と映像を有効にする
    {
      audio: true,
      video: true,
    },

    // 成功時のコールバック
    function (stream) {
      video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
      video.onloadedmetadata = function (e) {
        video.play();
        video.muted = "true";
      };

      // MediaStreamAudioSourceNodeを生成し、それにHTMLMediaElementを渡す
      var source = audioCtx.createMediaStreamSource(stream);

      // 二次フィルターを生成する
      var biquadFilter = audioCtx.createBiquadFilter();
      biquadFilter.type = "lowshelf";
      biquadFilter.frequency.value = 1000;
      biquadFilter.gain.value = range.value;

      // AudioBufferSourceNodeをgainNodeに、そしてgainNodeをdestinationに接続する
      // これでマウスを動かすことで音楽のボリュームを調整することができる
      source.connect(biquadFilter);
      biquadFilter.connect(audioCtx.destination);

      // マウスが動いたとき新しい座標を得る
      // そして増幅量を更新する

      range.oninput = function () {
        biquadFilter.gain.value = range.value;
      };
    },

    // エラー時のフィードバック
    function (err) {
      console.log("The following gUM error occured: " + err);
    },
  );
} else {
  console.log("getUserMedia not supported on your browser!");
}

// pre要素にスクリプトを書き出す

pre.innerHTML = myScript.innerHTML;