AudioContext.createMediaStreamSource()

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

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

構文

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

引数

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

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