blob: b3d36b6b52aa8c1e6f770f9126776c8f5a7bbc6b (
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
|
---
title: AudioContext.createMediaStreamDestination()
slug: Web/API/AudioContext/createMediaStreamDestination
tags:
- API
- AudioContext
- Method
- Reference
- Référence(2)
- Web Audio API
- createMediaStreamDestination
translation_of: Web/API/AudioContext/createMediaStreamDestination
---
<p>{{ APIRef("Web Audio API") }}</p>
<div>
<p>{{ domxref("AudioContext") }} インターフェイスの <code>createMediaStreamDestination()</code> メソッドは、<a href="/ja/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} と関連付けられた {{domxref("MediaStreamAudioDestinationNode")}} オブジェクトを生成します。このMediaStreamはローカルファイルに格納されたり他のコンピュータに送信されたりする音声ストリームを表します。</p>
</div>
<p>{{domxref("MediaStream")}} はノードが生成されたときに作成され、{{domxref("MediaStreamAudioDestinationNode")}}の <code>stream</code> プロパティを通じてアクセスすることができます。このストリームは {{domxref("navigator.getUserMedia") }} で得られた <code>MediaStream</code> と同じような使い方ができます。例えば、<code>RTCPeerConnection</code> インターフェイスの <code>addStream()</code> メソッドでリモートの端末に送ることができます。</p>
<p>詳細は {{domxref("MediaStreamAudioDestinationNode")}} のページを参照してください。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush: js">var audioCtx = new AudioContext();
var destination = audioCtx.createMediaStreamDestination();</pre>
<h3 id="Returns" name="Returns">戻り値</h3>
<p>{{domxref("MediaStreamAudioDestinationNode")}}</p>
<h2 id="Example" name="Example">例</h2>
<p>次の簡単な例では、{{domxref("MediaStreamAudioDestinationNode")}}と{{ domxref("OscillatorNode") }}と{{ domxref("MediaRecorder") }} (そのため現時点では、このサンプルは Firefox と Chrome でしか動作しません) を作成します。<code>MediaRecorder</code> は <code>MediaStreamDestinationNode</code> からの情報を記録するように設定されています。</p>
<p>ボタンをクリックするとオシレーター(振動子)が開始し、<code>MediaRecorder</code> も開始します。再びボタンを押して止めると、オシレーターと <code>MediaRecorder</code> の両方が停止します。<code>MediaRecorder</code> が停止すると <code>dataavailable</code> イベントが発火され、イベントデータが <code>chunks</code>配列にプッシュされます。その後、<code>stop</code> イベントが発火すると、新しい <code>blob</code> が opus タイプで作られます—そこには <code>chunks</code>配列のデータが書き込まれていて、その blob の URL を指す新しいウィンドウ(タブ)が開きます。</p>
<p>そこで opus ファイルの再生と保存ができます。</p>
<pre class="brush: html;highlight[17]"><!DOCTYPE html>
<html>
<head>
<title>createMediaStreamDestination() demo</title>
</head>
<body>
<h1>createMediaStreamDestination() demo</h1>
<p>Encoding a pure sine wave to an Opus file </p>
<button>Make sine wave</button>
<audio controls></audio>
<script>
var b = document.querySelector("button");
var clicked = false;
var chunks = [];
var ac = new AudioContext();
var osc = ac.createOscillator();
var dest = ac.createMediaStreamDestination();
var mediaRecorder = new MediaRecorder(dest.stream);
osc.connect(dest);
b.addEventListener("click", function(e) {
if (!clicked) {
mediaRecorder.start();
osc.start(0);
e.target.innerHTML = "Stop recording";
clicked = true;
} else {
mediaRecorder.stop();
osc.stop(0);
e.target.disabled = true;
}
});
mediaRecorder.ondataavailable = function(evt) {
// それぞれの chunk(blobs)を配列に入れる
chunks.push(evt.data);
};
mediaRecorder.onstop = function(evt) {
// blob を作成し開く
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
document.querySelector("audio").src = URL.createObjectURL(blob);
};
</script>
</body>
</html></pre>
<div class="note">
<p><strong>注:</strong> Github で<a href="https://mdn.github.io/webaudio-examples/create-media-stream-destination/index.html">実際に動作する例を閲覧</a>したり、<a href="https://github.com/mdn/webaudio-examples/blob/master/create-media-stream-destination/index.html">ソースコードを読む</a>ことができます。</p>
</div>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('Web Audio API', '#dom-audiocontext-createmediastreamdestination', 'createMediaStreamDestination()')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー互換性</h2>
<div>
<p>{{Compat("api.AudioContext.createMediaStreamDestination")}}</p>
</div>
<h2 id="See_also" name="See_also">参考</h2>
<ul>
<li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
|
