blob: 858389178260c67276e0eccb1c2f7b92b9ecfa47 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: AudioContext.createMediaStreamSource()
slug: Web/API/AudioContext/createMediaStreamSource
translation_of: Web/API/AudioContext/createMediaStreamSource
---
<p>{{ APIRef("Web Audio API") }}</p>
<div>
<p>インターフェースの<code>createMediaStreamSource()</code>メソッドは、指定のメディアストリームから(言い換えると{{ domxref("navigator.getUserMedia") }}インスタンスから){{ domxref("MediaStreamAudioSourceNode") }}オブジェクトを生成します。ここからの音声は再生や編集ができます。</p>
</div>
<p>メディアストリームオーディオソースノードの詳細は{{ domxref("MediaStreamAudioSourceNode") }}のページを参照してください。</p>
<h2 id="構文">構文</h2>
<pre class="brush: js">var audioCtx = new AudioContext();
var source = audioCtx.createMediaStreamSource(stream);</pre>
<h3 id="引数">引数</h3>
<dl>
<dt>stream</dt>
<dd>操作のためにオーディオグラフに加えたい{{domxref("MediaStream")}}オブジェクト。</dd>
</dl>
<h3 id="戻り値">戻り値</h3>
<p>{{domxref("MediaStreamAudioSourceNode")}}</p>
<h2 id="例">例</h2>
<p>この例では、メディア(音声+映像)ストリームを{{ domxref("navigator.getUserMedia") }}から獲得し、それを{{ htmlelement("video") }}要素に渡し、映像は再生しますが音声は再生しないようにします。音声は{{ domxref("MediaStreamAudioSourceNode") }}に渡します。次に、音声をローパスフィルタ{{ domxref("BiquadFilterNode") }}(低音を強めるように働きます)に渡し、そして{{domxref("AudioDestinationNode") }}に渡します。</p>
<p>{{ htmlelement("video") }}要素の下のスライダーはローパスフィルタの増幅量を操作します—スライダーで値を大きくすると、より低音が強くなります!</p>
<div class="note">
<p><strong>注:</strong> <a href="http://mdn.github.io/stream-source-buffer/">この例の実行</a>と<a href="https://github.com/mdn/stream-source-buffer">ソースの閲覧</a>もできます。</p>
</div>
<pre class="brush: js;highlight[46]">// プレフィックスが必要な場合を考慮して、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;</pre>
<div class="note">
<p><strong>注:</strong> <code>createMediaStreamSource()</code>の呼び出しによるメディアストリームの音声は、再び<code>AudioContext</code>の処理グラフに再び入ります。よって、ストリームの再生/停止は、まだメディアAPIとプレイヤーの操作で行えます。</p>
</div>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Audio API', '#widl-AudioContext-createMediaStreamSource-MediaStreamAudioSourceNode-MediaStream-mediaStream', 'createMediaStreamSource()')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
<p>{{Compat("api.AudioContext.createMediaStreamSource")}}</p>
<h2 id="参考">参考</h2>
<ul>
<li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
|
