MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

AudioContext.createMediaStreamSource()

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

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

構文

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

引数

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

戻り値

MediaStreamAudioSourceNode

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

注: createMediaStreamSource()の呼び出しによるメディアストリームの音声は、再びAudioContextの処理グラフに再び入ります。よって、ストリームの再生/停止は、まだメディアAPIとプレイヤーの操作で行えます。

仕様

Specification Status Comment
Web Audio API
The definition of 'createMediaStreamSource()' in that specification.
草案  

ブラウザ互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0webkit 25.0 (25.0)  未サポート 15.0webkit
22 (unprefixed)
6.0webkit
Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? 26.0 1.2 ? ? ? 33.0

参考

ドキュメントのタグと貢献者

 このページの貢献者: maruhiro
 最終更新者: maruhiro,