From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/audiocontext/audiocontext/index.html | 89 +++++++++ files/ja/web/api/audiocontext/close/index.html | 117 ++++++++++++ .../web/api/audiocontext/createanalyser/index.html | 154 ++++++++++++++++ .../api/audiocontext/createbiquadfilter/index.html | 126 +++++++++++++ .../web/api/audiocontext/createbuffer/index.html | 174 ++++++++++++++++++ .../api/audiocontext/createbuffersource/index.html | 143 +++++++++++++++ .../audiocontext/createchannelmerger/index.html | 133 ++++++++++++++ .../audiocontext/createchannelsplitter/index.html | 133 ++++++++++++++ .../api/audiocontext/createconvolver/index.html | 131 ++++++++++++++ .../ja/web/api/audiocontext/createdelay/index.html | 143 +++++++++++++++ .../createdynamicscompressor/index.html | 138 ++++++++++++++ .../ja/web/api/audiocontext/creategain/index.html | 128 +++++++++++++ .../createmediaelementsource/index.html | 154 ++++++++++++++++ .../createmediastreamdestination/index.html | 122 +++++++++++++ .../createmediastreamsource/index.html | 197 ++++++++++++++++++++ .../api/audiocontext/createoscillator/index.html | 111 ++++++++++++ .../web/api/audiocontext/createpanner/index.html | 198 +++++++++++++++++++++ .../api/audiocontext/createperiodicwave/index.html | 139 +++++++++++++++ .../audiocontext/createscriptprocessor/index.html | 69 +++++++ .../api/audiocontext/createstereopanner/index.html | 128 +++++++++++++ .../ja/web/api/audiocontext/currenttime/index.html | 112 ++++++++++++ .../api/audiocontext/decodeaudiodata/index.html | 155 ++++++++++++++++ .../ja/web/api/audiocontext/destination/index.html | 114 ++++++++++++ files/ja/web/api/audiocontext/index.html | 107 +++++++++++ files/ja/web/api/audiocontext/listener/index.html | 112 ++++++++++++ .../audiocontext/mozaudiochanneltype/index.html | 95 ++++++++++ .../web/api/audiocontext/onstatechange/index.html | 101 +++++++++++ files/ja/web/api/audiocontext/resume/index.html | 74 ++++++++ .../ja/web/api/audiocontext/samplerate/index.html | 112 ++++++++++++ files/ja/web/api/audiocontext/state/index.html | 66 +++++++ files/ja/web/api/audiocontext/suspend/index.html | 69 +++++++ 31 files changed, 3844 insertions(+) create mode 100644 files/ja/web/api/audiocontext/audiocontext/index.html create mode 100644 files/ja/web/api/audiocontext/close/index.html create mode 100644 files/ja/web/api/audiocontext/createanalyser/index.html create mode 100644 files/ja/web/api/audiocontext/createbiquadfilter/index.html create mode 100644 files/ja/web/api/audiocontext/createbuffer/index.html create mode 100644 files/ja/web/api/audiocontext/createbuffersource/index.html create mode 100644 files/ja/web/api/audiocontext/createchannelmerger/index.html create mode 100644 files/ja/web/api/audiocontext/createchannelsplitter/index.html create mode 100644 files/ja/web/api/audiocontext/createconvolver/index.html create mode 100644 files/ja/web/api/audiocontext/createdelay/index.html create mode 100644 files/ja/web/api/audiocontext/createdynamicscompressor/index.html create mode 100644 files/ja/web/api/audiocontext/creategain/index.html create mode 100644 files/ja/web/api/audiocontext/createmediaelementsource/index.html create mode 100644 files/ja/web/api/audiocontext/createmediastreamdestination/index.html create mode 100644 files/ja/web/api/audiocontext/createmediastreamsource/index.html create mode 100644 files/ja/web/api/audiocontext/createoscillator/index.html create mode 100644 files/ja/web/api/audiocontext/createpanner/index.html create mode 100644 files/ja/web/api/audiocontext/createperiodicwave/index.html create mode 100644 files/ja/web/api/audiocontext/createscriptprocessor/index.html create mode 100644 files/ja/web/api/audiocontext/createstereopanner/index.html create mode 100644 files/ja/web/api/audiocontext/currenttime/index.html create mode 100644 files/ja/web/api/audiocontext/decodeaudiodata/index.html create mode 100644 files/ja/web/api/audiocontext/destination/index.html create mode 100644 files/ja/web/api/audiocontext/index.html create mode 100644 files/ja/web/api/audiocontext/listener/index.html create mode 100644 files/ja/web/api/audiocontext/mozaudiochanneltype/index.html create mode 100644 files/ja/web/api/audiocontext/onstatechange/index.html create mode 100644 files/ja/web/api/audiocontext/resume/index.html create mode 100644 files/ja/web/api/audiocontext/samplerate/index.html create mode 100644 files/ja/web/api/audiocontext/state/index.html create mode 100644 files/ja/web/api/audiocontext/suspend/index.html (limited to 'files/ja/web/api/audiocontext') diff --git a/files/ja/web/api/audiocontext/audiocontext/index.html b/files/ja/web/api/audiocontext/audiocontext/index.html new file mode 100644 index 0000000000..6d26bf0ead --- /dev/null +++ b/files/ja/web/api/audiocontext/audiocontext/index.html @@ -0,0 +1,89 @@ +--- +title: AudioContext() +slug: Web/API/AudioContext/AudioContext +translation_of: Web/API/AudioContext/AudioContext +--- +

{{APIRef("Web Audio API")}}{{SeeCompatTable}}

+ +

AudioContext() コンストラクタは新しい {{domxref("AudioContext")}} オブジェクトを作成します。このオブジェクトはオーディオモジュールが相互に接続された音声処理のグラフを表現しています。このグラフ中で用いられるオーディオモジュールは {{domxref("AudioNode")}} として表現されます。

+ +

記法

+ +
var audioContext = new AudioContext(options)
+ +

引数

+ +

なし。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Web Audio API','#AudioContext','AudioContext()')}}{{Spec2('Web Audio API')}}Initial definition.
+ +

ブラウザー互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(55.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(42)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(55.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(42)}}{{CompatUnknown}}{{CompatChrome(55.0)}}
+
diff --git a/files/ja/web/api/audiocontext/close/index.html b/files/ja/web/api/audiocontext/close/index.html new file mode 100644 index 0000000000..a53f04b8b8 --- /dev/null +++ b/files/ja/web/api/audiocontext/close/index.html @@ -0,0 +1,117 @@ +--- +title: AudioContext.close() +slug: Web/API/AudioContext/close +translation_of: Web/API/AudioContext/close +--- +

{{ APIRef("Web Audio API") }}

+ +

{{ domxref("AudioContext") }}インターフェースのclose()メソッドは、オーディオコンテキストを閉じて使っていたシステムのオーディオリソースを全て解放します。

+ +

閉じたコンテキストは新しいノードを生成できませんが、音声データのデコードやバッファの生成などは可能です。

+ +

この関数は、他の参照も同様に解放されない限り、AudioContextが生成したオブジェクトは自動的には解放しません。しかし、これはオーディオリソースを強制的に解放します。よって、オーディオコンテキストの更なる生成と使用はできなくなり、オーディオコンテキストの時間の流れは止まり、音声データの処理は停止します。
+ 全てのAudioContext-creation-blockingリソースが解放されたとき、返された{{jsxref("Promise")}}が完了します。このメソッドは{{domxref("OfflineAudioContext")}}で呼ばれたときINVALID_STATE_ERR例外が発生します。
+  

+ +

構文

+ +
var audioCtx = new AudioContext();
+audioCtx.close().then(function() { ... });
+
+ +

戻り値

+ +

voidで完了する{{jsxref("Promise")}}。

+ +

例

+ +

次のスニペットはAudioContext states デモ(すぐ実行)から取ったものです。stopボタンをクリックすると、close()が呼ばれます。プロミスに成功すると、リセットされ最初の状態に戻ります。

+ +
stopBtn.onclick = function() {
+  audioCtx.close().then(function() {
+    startBtn.removeAttribute('disabled');
+    susresBtn.setAttribute('disabled','disabled');
+    stopBtn.setAttribute('disabled','disabled');
+  });
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-close-Promise-void', 'close()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(43.0)}}{{CompatGeckoDesktop(40.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createanalyser/index.html b/files/ja/web/api/audiocontext/createanalyser/index.html new file mode 100644 index 0000000000..c186d1029c --- /dev/null +++ b/files/ja/web/api/audiocontext/createanalyser/index.html @@ -0,0 +1,154 @@ +--- +title: AudioContext.createAnalyser() +slug: Web/API/AudioContext/createAnalyser +translation_of: Web/API/BaseAudioContext/createAnalyser +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateAnalyser()メソッドは、音声の時間と周波数を解析する{{ domxref("AnalyserNode") }}を生成します。これはデータの可視化などで使えます。

+
+ +
+

注: このノードの詳しい説明は、{{domxref("AnalyserNode")}}のページを参照してください。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+ +

戻り値

+ +

{{domxref("AnalyserNode")}}

+ +

例

+ +

次のサンプルでは、基本的なAudioContextのAnalyserNodeの生成、requestAnimationFrame()による時間データの周期的な収集と「オシロスコープのように」現在の音声を出力する方法を示しています。より完全な例と情報は、Voice-change-O-maticデモ(app.jsの128–205行目)を参照してください。

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.fftSize;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// 現在の音のオシロスコープのように描く
+
+function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createAnalyser-AnalyserNode', 'createAnalyser()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createbiquadfilter/index.html b/files/ja/web/api/audiocontext/createbiquadfilter/index.html new file mode 100644 index 0000000000..136557bea5 --- /dev/null +++ b/files/ja/web/api/audiocontext/createbiquadfilter/index.html @@ -0,0 +1,126 @@ +--- +title: AudioContext.createBiquadFilter() +slug: Web/API/AudioContext/createBiquadFilter +translation_of: Web/API/BaseAudioContext/createBiquadFilter +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateBiquadFilter()メソッドは、いくつかの一般的なフィルタを設定できる二次フィルターを表す{{ domxref("BiquadFilterNode") }}を生成します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var biquadFilter = audioCtx.createBiquadFilter();
+ +

戻り値

+ +

{{domxref("BiquadFilterNode")}}

+ +

例

+ +

次の例はAudioContextのBiquadFilterNodeの使い方を説明しています。完全に動作する例は、voice-change-o-maticデモ(ソースコードもあります)を参照してください。

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// このアプリで使う2つのノードを設定する
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+var convolver = audioCtx.createConvolver();
+
+// ノードを接続する
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// 二次フィルターで操作する
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createBiquadFilter-BiquadFilterNode', 'createBiquadFilter()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0 {{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参照

+ + diff --git a/files/ja/web/api/audiocontext/createbuffer/index.html b/files/ja/web/api/audiocontext/createbuffer/index.html new file mode 100644 index 0000000000..e94a5a18be --- /dev/null +++ b/files/ja/web/api/audiocontext/createbuffer/index.html @@ -0,0 +1,174 @@ +--- +title: AudioContext.createBuffer() +slug: Web/API/AudioContext/createBuffer +translation_of: Web/API/BaseAudioContext/createBuffer +--- +

{{ APIRef("Web Audio API") }}

+ +
+

インターフェースのcreateBuffer()メソッドは、新規の空の{{ domxref("AudioBuffer") }}オブジェクトを生成します。そこにデータを書きこめば、{{ domxref("AudioBufferSourceNode") }}で再生できます。

+
+ +
+

Note: createBuffer() used to be able to take compressed data and give back decoded samples, but this ability was removed from the spec, because all the decoding was done on the main thread, therefore createBuffer() was blocking other code execution. The asynchronous method decodeAudioData() does the same thing — takes compressed audio, say, an MP3 file, and directly gives you back an {{ domxref("AudioBuffer") }} that you can then set to play via in an {{ domxref("AudioBufferSourceNode") }}. For simple uses like playing an MP3, decodeAudioData() is what you should be using.

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var buffer = audioCtx.createBuffer(numOfChannels, length, sampleRate);
+ +

引数

+ +
+

Note: For an in-depth explanation of how audio buffers work, and what these parameters mean, read Audio buffers: frames, samples and channels from our Basic concepts guide.

+
+ +
+
numOfChannels
+
integerで現されたバッファのチャンネルの数。実装は少なくとも32チャンネルに対応している
+
length
+
integerで表されたバッファのサンプルフレームの数
+
sampleRate
+
1秒あたりのサンプルフレームの数。実装は少なくとも22050から96000の範囲に対応している
+
+ +

戻り値

+ +

{{domxref("AudioBuffer")}}

+ +

例

+ +

まずは2つの小さな例で、引数をどのように設定するかを説明します:

+ +
var audioCtx = new AudioContext();
+var buffer = audioCtx.createBuffer(2, 22050, 44100);
+ +

このようにすると、ステレオ(2チャンネル)のバッファが生成され、44100Hz(極めて一般的で、多くの通常のサウンドカードはこのレートで動作します)のAudioContextで再生すると、0.5秒間(22050フレーム / 44100Hz )となります。

+ +
var audioCtx = new AudioContext();
+var buffer = audioCtx.createBuffer(1, 22050, 22050);
+ +

このようにすると、モノラル(1チャンネル)のバッファが生成され、44100HzのAudioContextで再生すると、自動的に44100Hzに再サンプリングされ(そして結果として44100フレームとなり)、1秒間(44100フレーム / 44100Hz)となります。

+ +
+

Note: audio resampling is very similar to image resizing: say you've got a 16 x 16 image, but you want it to fill a 32x32 area: you resize (resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, and the resized image takes up less space. Resampled audio is exactly the same — you save space, but in practice you will be unable to properly reproduce high frequency content (treble sound).

+
+ +

次は少し複雑なcreateBuffer()の例を見てみましょう。2秒間のバッファを生成し、ホワイトノイズを書き込み、{{ domxref("AudioBufferSourceNode") }}で再生します。コードをすぐに実行することや、ソースコードを閲覧することもできます。

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var button = document.querySelector('button');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// ステレオ
+var channels = 2;
+// AudioContextのサンプルレートで2秒間の空のステレオバッファを生成する
+var frameCount = audioCtx.sampleRate * 2.0;
+
+var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // バッファにホワイトノイズを書き込む;
+  // 単なる-1.0から1.0の間の乱数の値である
+  for (var channel = 0; channel < channels; channel++) {
+   // 実際のデータの配列を得る
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i < frameCount; i++) {
+     // Math.random()は[0; 1.0]である
+     // 音声は[-1.0; 1.0]である必要がある
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // AudioBufferSourceNodeを得る
+  // これはAudioBufferを再生するときに使うAudioNodeである
+  var source = audioCtx.createBufferSource();
+  // AudioBufferSourceNodeにバッファを設定する
+  source.buffer = myArrayBuffer;
+  // AudioBufferSourceNodeを出力先に接続すると音声が聞こえるようになる
+  source.connect(audioCtx.destination);
+  // 音源の再生を始める
+  source.start();
+}
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createBuffer-AudioBuffer-unsigned-long-numberOfChannels-unsigned-long-length-float-sampleRate', 'createBuffer()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0 {{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createbuffersource/index.html b/files/ja/web/api/audiocontext/createbuffersource/index.html new file mode 100644 index 0000000000..24f65061c6 --- /dev/null +++ b/files/ja/web/api/audiocontext/createbuffersource/index.html @@ -0,0 +1,143 @@ +--- +title: AudioContext.createBufferSource() +slug: Web/API/AudioContext/createBufferSource +translation_of: Web/API/BaseAudioContext/createBufferSource +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateBufferSource()メソッドは、{{ domxref("AudioBuffer") }}オブジェクトに書き込まれた音声データを再生する{{ domxref("AudioBufferSourceNode") }}を生成します。{{ domxref("AudioBuffer") }}は{{domxref("AudioContext.createBuffer")}}を使った場合や、{{domxref("AudioContext.decodeAudioData")}}でオーディオトラックをデコードしたときに生成されます。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var source = audioCtx.createBufferSource();
+ +

戻り値

+ +

{{domxref("AudioBufferSourceNode")}}

+ +

例

+ +

この例では、2秒間のバッファを生成し、ホワイトノイズを書き込み、{{ domxref("AudioBufferSourceNode") }}で再生します。コメントは何をしているかを簡単に説明しています。

+ +
+

注: コードの実行とソースの閲覧もできます。

+
+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var button = document.querySelector('button');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// ステレオ
+var channels = 2;
+// AudioContextのサンプルレートで2秒間の空のステレオバッファを生成する
+var frameCount = audioCtx.sampleRate * 2.0;
+
+var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // バッファにホワイトノイズを書き込む;
+  // 単なる-1.0から1.0の間の乱数の値である
+  for (var channel = 0; channel < channels; channel++) {
+   // 実際のデータの配列を得る
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i < frameCount; i++) {
+     // Math.random()は[0; 1.0]である
+     // 音声は[-1.0; 1.0]である必要がある
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // AudioBufferSourceNodeを得る
+  // これはAudioBufferを再生するときに使うAudioNodeである
+  var source = audioCtx.createBufferSource();
+  // AudioBufferSourceNodeにバッファを設定する
+  source.buffer = myArrayBuffer;
+  // AudioBufferSourceNodeを出力先に接続すると音声が聞こえるようになる
+  source.connect(audioCtx.destination);
+  // 音源の再生を始める
+  source.start();
+}
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createBufferSource-AudioBufferSourceNode', 'createBufferSource()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createchannelmerger/index.html b/files/ja/web/api/audiocontext/createchannelmerger/index.html new file mode 100644 index 0000000000..e79b116642 --- /dev/null +++ b/files/ja/web/api/audiocontext/createchannelmerger/index.html @@ -0,0 +1,133 @@ +--- +title: AudioContext.createChannelMerger() +slug: Web/API/AudioContext/createChannelMerger +translation_of: Web/API/BaseAudioContext/createChannelMerger +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateChannelMerger()メソッドは、複数のオーディオストリームを1つに混合する{{domxref("ChannelMergerNode")}}を生成します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var merger = audioCtx.createChannelMerger(numberOfInputs);
+ +

引数

+ +
+
numberOfInputs
+
入力オーディオストリームのチャンネルの数。指定がない場合は6になる。
+
+ +

戻り値

+ +

{{domxref("ChannelMergerNode")}}

+ +

例

+ +

この例ではステレオトラックを分け、左右のチャンネルをそれぞれ別に処理する方法を示しています。これを使うためには、{{domxref("AudioNode.connect(AudioNode)") }}メソッドの2番目と3番目の引数を使い、接続元と接続先のチャンネルの番号を指定する必要があります。

+ +
var ac = new AudioContext();
+ac.decodeAudioData(someStereoBuffer, function(data) {
+ var source = ac.createBufferSource();
+ source.buffer = data;
+ var splitter = ac.createChannelSplitter(2);
+ source.connect(splitter);
+ var merger = ac.createChannelMerger(2);
+
+ // 左チャンネルのボリュームのみ小さくする
+ var gain = ac.createGain();
+ gain.value = 0.5;
+ splitter.connect(gain, 0);
+
+ // splitterをmergerの2番目の入力にして戻す
+ // ここではチャンネルを入れ替えることで、ステレオ音声の左右を逆にしている
+ gain.connect(merger, 0, 1);
+ splitter.connect(merger, 1, 0);
+
+ var dest = ac.createMediaStreamDestination();
+
+ // ChannelMergerNodeを使ったのでステレオのMediaStreamとなった
+ // webオーディオグラフのWebRTCやMediaRecorderなどに渡す
+ merger.connect(dest);
+});
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createChannelMerger-ChannelMergerNode-unsigned-long-numberOfInputs', 'createChannelMerger()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参照

+ + diff --git a/files/ja/web/api/audiocontext/createchannelsplitter/index.html b/files/ja/web/api/audiocontext/createchannelsplitter/index.html new file mode 100644 index 0000000000..07444c49d0 --- /dev/null +++ b/files/ja/web/api/audiocontext/createchannelsplitter/index.html @@ -0,0 +1,133 @@ +--- +title: AudioContext.createChannelSplitter() +slug: Web/API/AudioContext/createChannelSplitter +translation_of: Web/API/BaseAudioContext/createChannelSplitter +--- +

{{ APIRef("Web Audio API") }}

+ +
+

インターフェースのcreateChannelSplitter()メソッドは、オーディオストリームを個別に処理するためにチャンネルを分離する{{domxref("ChannelSplitterNode")}}を生成します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var splitter = audioCtx.createChannelSplitter(numberOfOutputs);
+ +

引数

+ +
+
numberOfOutputs
+
入力オーディオストリームを分ける数。引数の指定がなければ6。
+
+ +

Returns

+ +

{{domxref("ChannelSplitterNode")}}

+ +

例

+ +

この例ではステレオトラックを分け、左右のチャンネルをそれぞれ別に処理する方法を示しています。これを使うためには、{{domxref("AudioNode.connect(AudioNode)") }}メソッドの2番目と3番目の引数を使い、接続元と接続先のチャンネルの番号を指定する必要があります。

+ +
var ac = new AudioContext();
+ac.decodeAudioData(someStereoBuffer, function(data) {
+ var source = ac.createBufferSource();
+ source.buffer = data;
+ var splitter = ac.createChannelSplitter(2);
+ source.connect(splitter);
+ var merger = ac.createChannelMerger(2);
+
+ // 左チャンネルのボリュームのみ小さくする
+ var gain = ac.createGain();
+ gain.value = 0.5;
+ splitter.connect(gain, 0);
+
+ // splitterをmergerの2番目の入力にして戻す
+ // ここではチャンネルを入れ替えることで、ステレオ音声の左右を逆にしている
+ gain.connect(merger, 0, 1);
+ splitter.connect(merger, 1, 0);
+
+ var dest = ac.createMediaStreamDestination();
+
+ // ChannelMergerNodeを使ったのでステレオのMediaStreamとなった
+ // webオーディオグラフのWebRTCやMediaRecorderなどに渡す
+ merger.connect(dest);
+});
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createChannelSplitter-ChannelSplitterNode-unsigned-long-numberOfOutputs', 'createChannelSplitter()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createconvolver/index.html b/files/ja/web/api/audiocontext/createconvolver/index.html new file mode 100644 index 0000000000..ae5acf59c8 --- /dev/null +++ b/files/ja/web/api/audiocontext/createconvolver/index.html @@ -0,0 +1,131 @@ +--- +title: AudioContext.createConvolver() +slug: Web/API/AudioContext/createConvolver +translation_of: Web/API/BaseAudioContext/createConvolver +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateConvolver()メソッドは、音声にリバーブ効果などを適用する{{ domxref("ConvolverNode") }}を生成します。詳細はspec definition of Convolutionを参照してください。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var convolver = audioCtx.createConvolver();
+ +

戻り値

+ +

{{domxref("ConvolverNode")}}

+ +

例

+ +

次の例は畳み込みノードを生成する基礎的なAudioContextの使い方を示しています。まず、畳み込み(インパルス応答)が適用される音声が書き込まれたAudioBufferを生成し、そしてそれに畳み込みを適用します。例ではコンサートホールの群集の短い音声を使っていて、深く音響したリバーブ効果がかかっています。

+ +

例と情報の応用は、Voice-change-O-maticデモ(ソースコード)をチェックしてください。

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var convolver = audioCtx.createConvolver();
+
+  ...
+
+// XHRで畳み込みノードのための音声トラックを得る
+
+var soundSource, concertHallBuffer;
+
+ajaxRequest = new XMLHttpRequest();
+ajaxRequest.open('GET', 'concert-crowd.ogg', true);
+ajaxRequest.responseType = 'arraybuffer';
+
+ajaxRequest.onload = function() {
+  var audioData = ajaxRequest.response;
+  audioCtx.decodeAudioData(audioData, function(buffer) {
+      concertHallBuffer = buffer;
+      soundSource = audioCtx.createBufferSource();
+      soundSource.buffer = concertHallBuffer;
+    }, function(e){"Error with decoding audio data" + e.err});
+}
+
+ajaxRequest.send();
+
+  ...
+
+convolver.buffer = concertHallBuffer;
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createConvolver-ConvolverNode', 'createConvolver()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createdelay/index.html b/files/ja/web/api/audiocontext/createdelay/index.html new file mode 100644 index 0000000000..709a8a375b --- /dev/null +++ b/files/ja/web/api/audiocontext/createdelay/index.html @@ -0,0 +1,143 @@ +--- +title: AudioContext.createDelay() +slug: Web/API/AudioContext/createDelay +translation_of: Web/API/BaseAudioContext/createDelay +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateDelay()メソッドは、入力音声信号を一定時間遅らせる{{domxref("DelayNode")}}を生成します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var synthDelay = audioCtx.createDelay(maxDelayTime);
+ +

引数

+ +
+
maxDelayTime
+
音声信号の最大遅れ時間の秒数。デフォルトは0
+
+ +

戻り値

+ +

{{domxref("DelayNode")}}

+ +

例

+ +

ループする3つの異なる簡単な例を用意しました。create-delayを見てください。(ソースコードも閲覧できます。)ただPlayボタンを押すと、ループはすぐ始まります。スライダーを右に動かしPlayボタンを押すと、待ち時間が挿入され、少し時間が過ぎるまで再生が始まりません。

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var synthDelay = audioCtx.createDelay(5.0);
+
+  ...
+
+var synthSource;
+
+playSynth.onclick = function() {
+  synthSource = audioCtx.createBufferSource();
+  synthSource.buffer = buffers[2];
+  synthSource.loop = true;
+  synthSource.start();
+  synthSource.connect(synthDelay);
+  synthDelay.connect(destination);
+  this.setAttribute('disabled', 'disabled');
+}
+
+stopSynth.onclick = function() {
+  synthSource.disconnect(synthDelay);
+  synthDelay.disconnect(destination);
+  synthSource.stop();
+  playSynth.removeAttribute('disabled');
+}
+
+...
+
+var delay1;
+rangeSynth.oninput = function() {
+delay1 = rangeSynth.value;
+synthDelay.delayTime.value = delay1;
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createDelay-DelayNode-double-maxDelayTime', 'createDelay()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参照

+ + diff --git a/files/ja/web/api/audiocontext/createdynamicscompressor/index.html b/files/ja/web/api/audiocontext/createdynamicscompressor/index.html new file mode 100644 index 0000000000..2fa5ca43ed --- /dev/null +++ b/files/ja/web/api/audiocontext/createdynamicscompressor/index.html @@ -0,0 +1,138 @@ +--- +title: AudioContext.createDynamicsCompressor() +slug: Web/API/AudioContext/createDynamicsCompressor +translation_of: Web/API/BaseAudioContext/createDynamicsCompressor +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateDynamicsCompressor()メソッドは、音声信号にコンプレッサーを適用する{{domxref("DynamicsCompressorNode")}}を生成します。

+
+ +

コンプレッサーは、音声信号の最大部分の音量を小さくし、最小部分の音量を大きくします。一般的に、より大きく、豊かで、高密度な音になります。これはゲームや音楽アプリケーションでたくさんの別々の音を同時に再生する場合に特に重要です。このような場合、全体の音量の操作したり、出力音声のクリッピング(ひずみ)を避けたいはずです。

+ +

構文

+ +
var audioCtx = new AudioContext();
+var compressor = audioCtx.createDynamicsCompressor();
+ +

戻り値

+ +

{{domxref("DynamicsCompressorNode")}}

+ +

例

+ +

音声トラックにコンプレッサーを追加するためにcreateDynamicsCompressor()を使う簡単なデモコードです。より完全なサンプルは、basic Compressor example (ソースコードの閲覧)を参照してください。

+ +
// MediaElementAudioSourceNodeを生成する
+// そこにHTMLMediaElementを入れる
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// コンプレッサーノードを生成する
+var compressor = audioCtx.createDynamicsCompressor();
+compressor.threshold.value = -50;
+compressor.knee.value = 40;
+compressor.ratio.value = 12;
+compressor.reduction.value = -20;
+compressor.attack.value = 0;
+compressor.release.value = 0.25;
+
+// AudioBufferSourceNodeを行き先(destination)につなげる
+source.connect(audioCtx.destination);
+
+button.onclick = function() {
+  var active = button.getAttribute('data-active');
+  if(active == 'false') {
+    button.setAttribute('data-active', 'true');
+    button.innerHTML = 'Remove compression';
+
+    source.disconnect(audioCtx.destination);
+    source.connect(compressor);
+    compressor.connect(audioCtx.destination);
+  } else if(active == 'true') {
+    button.setAttribute('data-active', 'false');
+    button.innerHTML = 'Add compression';
+
+    source.disconnect(compressor);
+    compressor.disconnect(audioCtx.destination);
+    source.connect(audioCtx.destination);
+  }
+}
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createDynamicsCompressor-DynamicsCompressorNode', 'createDynamicsCompressor()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/creategain/index.html b/files/ja/web/api/audiocontext/creategain/index.html new file mode 100644 index 0000000000..c536a0621c --- /dev/null +++ b/files/ja/web/api/audiocontext/creategain/index.html @@ -0,0 +1,128 @@ +--- +title: AudioContext.createGain() +slug: Web/API/AudioContext/createGain +translation_of: Web/API/BaseAudioContext/createGain +--- +

{{ APIRef("Web Audio API") }}

+ +
+

インターフェースのcreateGain()メソッドは、音声の全体的なボリュームを操作する{{ domxref("GainNode") }}を生成します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var gainNode = audioCtx.createGain();
+ +

戻り値

+ +

{{domxref("GainNode")}}

+ +

例

+ +

次の例では{{domxref("AudioContext")}}、GainNodeを生成する基本的な使い方を示しています。生成したGainNodeは、Muteボタンを押したときにgainプロパティの値を設定することで、無音・無音解除するために使っています。完全な例と情報は、Voice-change-O-maticデモ(ソースの閲覧)をクリックしてください。

+ +
<div>
+  <a class="mute">Mute button</a>
+</div>
+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var gainNode = audioCtx.createGain();
+var mute = document.querySelector('.mute');
+
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+  ...
+
+mute.onclick = voiceMute;
+
+function voiceMute() {
+  if(mute.id == "") {
+    gainNode.gain.value = 0;
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1;
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createmediaelementsource/index.html b/files/ja/web/api/audiocontext/createmediaelementsource/index.html new file mode 100644 index 0000000000..37e38066b2 --- /dev/null +++ b/files/ja/web/api/audiocontext/createmediaelementsource/index.html @@ -0,0 +1,154 @@ +--- +title: AudioContext.createMediaElementSource() +slug: Web/API/AudioContext/createMediaElementSource +translation_of: Web/API/AudioContext/createMediaElementSource +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateMediaElementSource()メソッドは、新しく{{ domxref("MediaElementAudioSourceNode") }} オブジェクトを作成するために使用されます。HTML内に存在する{{htmlelement("audio")}} または {{htmlelement("video")}} を指定すると、そのオーディオを再生し、操作することができます。

+ +

media element audio source nodesについての詳細は、 {{ domxref("MediaElementAudioSourceNode") }} を参照して下さい。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);
+ +

引数

+ +
+
myMediaElement
+
プロセッシング・グラフで操作するための {{ domxref("HTMLMediaElement") }} オブジェクトです。
+
+ +

戻り値

+ +

{{domxref("MediaElementAudioSourceNode")}}

+ +

例

+ +

以下の例では、createMediaElementSource()を使用して {{ htmlelement("audio") }} から音源を作成します。 再生される音源は {{ domxref("GainNode") }} を介し {{ domxref("AudioDestinationNode") }} に渡されます。マウスポインタが動くとupdatePage()関数が呼ばれ、マウスポインタのY座標の値をウィンドウの高さで割った比率を元に現在のゲインを計算します。また、マウスポインタを上下に動かすことで、再生している音楽の音量を上げ下げできます。

+ +
+

注記:  この例のデモと、ソースを見ることができます。

+
+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// MediaElementAudioSourceNodeを作成
+// HTMLMediaElementをそこへ接続
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// gain nodeを作成
+var gainNode = audioCtx.createGain();
+
+// マウスポインタのY座標と
+// 画面の高さを保持するための変数を作成
+var CurY;
+var HEIGHT = window.innerHeight;
+
+// マウスが動いたら新しいY座標を取得し、
+// ゲインの値を設定する
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    gainNode.gain.value = CurY/HEIGHT;
+}
+
+
+// AudioBufferSourceNodeをgainNodeへ接続
+// gainNodeをdestinationへ接続
+// これで音楽の再生と、マウスカーソルで音量を調節できるようになる
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+ +
+

注記: createMediaElementSource()を呼んだ結果として {{ domxref("HTMLMediaElement") }} から再生される音声はAudioContextのプロセッシング・グラフへ再度ルーティングされます。従って、createMediaElementSource()を呼んだ後も音声の再生/一時停止はmedia element API及びプレーヤーの再生/一時停止ボタンから操作できます。

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザの互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/audiocontext/createmediastreamdestination/index.html b/files/ja/web/api/audiocontext/createmediastreamdestination/index.html new file mode 100644 index 0000000000..b3d36b6b52 --- /dev/null +++ b/files/ja/web/api/audiocontext/createmediastreamdestination/index.html @@ -0,0 +1,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 +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }} インターフェイスの createMediaStreamDestination() メソッドは、WebRTC {{domxref("MediaStream")}} と関連付けられた {{domxref("MediaStreamAudioDestinationNode")}} オブジェクトを生成します。このMediaStreamはローカルファイルに格納されたり他のコンピュータに送信されたりする音声ストリームを表します。

+
+ +

{{domxref("MediaStream")}} はノードが生成されたときに作成され、{{domxref("MediaStreamAudioDestinationNode")}}の stream プロパティを通じてアクセスすることができます。このストリームは {{domxref("navigator.getUserMedia") }} で得られた MediaStream と同じような使い方ができます。例えば、RTCPeerConnection インターフェイスの addStream() メソッドでリモートの端末に送ることができます。

+ +

詳細は {{domxref("MediaStreamAudioDestinationNode")}} のページを参照してください。

+ +

構文

+ +
var audioCtx = new AudioContext();
+var destination = audioCtx.createMediaStreamDestination();
+ +

戻り値

+ +

{{domxref("MediaStreamAudioDestinationNode")}}

+ +

例

+ +

次の簡単な例では、{{domxref("MediaStreamAudioDestinationNode")}}と{{ domxref("OscillatorNode") }}と{{ domxref("MediaRecorder") }} (そのため現時点では、このサンプルは Firefox と Chrome でしか動作しません) を作成します。MediaRecorder は MediaStreamDestinationNode からの情報を記録するように設定されています。

+ +

ボタンをクリックするとオシレーター(振動子)が開始し、MediaRecorder も開始します。再びボタンを押して止めると、オシレーターと MediaRecorder の両方が停止します。MediaRecorder が停止すると dataavailable イベントが発火され、イベントデータが chunks配列にプッシュされます。その後、stop イベントが発火すると、新しい blob が opus タイプで作られます—そこには chunks配列のデータが書き込まれていて、その blob の URL を指す新しいウィンドウ(タブ)が開きます。

+ +

そこで opus ファイルの再生と保存ができます。

+ +
<!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>
+ +
+

注: Github で実際に動作する例を閲覧したり、ソースコードを読むことができます。

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('Web Audio API', '#dom-audiocontext-createmediastreamdestination', 'createMediaStreamDestination()')}}{{Spec2('Web Audio API')}}
+ +

ブラウザー互換性

+ +
+ + +

{{Compat("api.AudioContext.createMediaStreamDestination")}}

+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createmediastreamsource/index.html b/files/ja/web/api/audiocontext/createmediastreamsource/index.html new file mode 100644 index 0000000000..23911f427d --- /dev/null +++ b/files/ja/web/api/audiocontext/createmediastreamsource/index.html @@ -0,0 +1,197 @@ +--- +title: AudioContext.createMediaStreamSource() +slug: Web/API/AudioContext/createMediaStreamSource +translation_of: Web/API/AudioContext/createMediaStreamSource +--- +

{{ APIRef("Web Audio API") }}

+ +
+

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

+
+ +

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

+ +

構文

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

引数

+ +
+
stream
+
操作のためにオーディオグラフに加えたい{{domxref("MediaStream")}}オブジェクト。
+
+ +

戻り値

+ +

{{domxref("MediaStreamAudioSourceNode")}}

+ +

例

+ +

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

+ +

{{ htmlelement("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とプレイヤーの操作で行えます。

+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createMediaStreamSource-MediaStreamAudioSourceNode-MediaStream-mediaStream', 'createMediaStreamSource()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createoscillator/index.html b/files/ja/web/api/audiocontext/createoscillator/index.html new file mode 100644 index 0000000000..e971400f5d --- /dev/null +++ b/files/ja/web/api/audiocontext/createoscillator/index.html @@ -0,0 +1,111 @@ +--- +title: AudioContext.createOscillator() +slug: Web/API/AudioContext/createOscillator +translation_of: Web/API/BaseAudioContext/createOscillator +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateOscillator()メソッドは、周期的な波形を発生源である{{ domxref("OscillatorNode") }}を生成します。これは基礎的な音源です。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var oscillator = audioCtx.createOscillator();
+ +

戻り値

+ +

{{domxref("OscillatorNode")}}

+ +

例

+ +

次の例はオシレーターノードを生成する基礎的なAudioContextの使い方を示しています。例と情報の応用は、Voice-change-O-maticデモ(ソースコード)をチェックしてください。また、{{ domxref("OscillatorNode") }}にはより詳細な情報があります。

+ +
// webオーディオAPIコンテキストを生成する
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// オシレーターノードを生成する
+var oscillator = audioCtx.createOscillator();
+
+oscillator.type = 'square';
+oscillator.frequency.value = 3000; // 値はHz(ヘルツ)
+oscillator.start();
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createOscillator-OscillatorNode', 'createOscillator')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createpanner/index.html b/files/ja/web/api/audiocontext/createpanner/index.html new file mode 100644 index 0000000000..1b30c60a03 --- /dev/null +++ b/files/ja/web/api/audiocontext/createpanner/index.html @@ -0,0 +1,198 @@ +--- +title: AudioContext.createPanner() +slug: Web/API/AudioContext/createPanner +translation_of: Web/API/BaseAudioContext/createPanner +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }} の createPanner() を利用すると、新しい {{domxref("PannerNode")}} を作成できます。これは空間音響を実現するために利用されます。

+ +

作成された PannerNode は、音声の聴取者の位置と向きから空間的な再生を行います。聴取者の位置と向きは、 {{domxref("AudioListener") }} オブジェクトとして表現され、{{domxref("AudioContext.listener") }} で参照できます。

+
+ +

記法

+ +
var audioCtx = new AudioContext();
+var panner = audioCtx.createPanner();
+ +

返り値

+ +

{{domxref("PannerNode")}} を返します。

+ +

利用例

+ +

以下の例では、createPanner() メソッドの利用方法と、 {{domxref("AudioListener")}} と{{domxref("PannerNode")}} による空間音響のコントロール方法について解説します。一般的には、聴取者と音源の 3 次元空間上での位置を決め、アプリケーションの動きに合わせてそれらを更新することになります。これを利用することで、キャラクターが世界の中を動き回るようなゲームで、近づくと聞こえ、遠ざかると聞こえなくなるステレオを実現できます。 以下の例では moveRight() や moveLeft()、PositionPanner() などを利用して、位置をコントロールしています。

+ +

完全な実装例は panner-node example (ソースコード) を確認してください。このデモでは 2.5 次元上の「メタルの部屋」上で、曲を再生するラジカセの位置を変更させることで変化する音声を体験できます。

+ +

付記：以下の例では比較的新しい属性を利用するために、ブラウザの機能を調べています。例えば位置を設定する {{domxref("AudioListener.forwardX")}}) などです。これらが利用できる場合は利用し、そうでない場合は{{domxref("AudioListener.setOrientation()")}}) のような古いメソッドを利用しています。

+ +
// set up listener and panner position information
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = Math.floor(WIDTH/2);
+var yPos = Math.floor(HEIGHT/2);
+var zPos = 295;
+
+// define other variables
+
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+panner.panningModel = 'HRTF';
+panner.distanceModel = 'inverse';
+panner.refDistance = 1;
+panner.maxDistance = 10000;
+panner.rolloffFactor = 1;
+panner.coneInnerAngle = 360;
+panner.coneOuterAngle = 0;
+panner.coneOuterGain = 0;
+
+if(panner.orientationX) {
+  panner.orientationX.value = 1;
+  panner.orientationY.value = 0;
+  panner.orientationZ.value = 0;
+} else {
+  panner.setOrientation(1,0,0);
+}
+
+var listener = audioCtx.listener;
+
+if(listener.forwardX) {
+  listener.forwardX.value = 0;
+  listener.forwardY.value = 0;
+  listener.forwardZ.value = -1;
+  listener.upX.value = 0;
+  listener.upY.value = 1;
+  listener.upZ.value = 0;
+} else {
+  listener.setOrientation(0,0,-1,0,1,0);
+}
+
+var source;
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;
+
+// listener will always be in the same place for this demo
+
+if(listener.positionX) {
+  listener.positionX.value = xPos;
+  listener.positionY.value = yPos;
+  listener.positionZ.value = 300;
+} else {
+  listener.setPosition(xPos,yPos,300);
+}
+
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+
+// panner will move as the boombox graphic moves around on the screen
+function positionPanner() {
+  if(panner.positionX) {
+    panner.positionX.value = xPos;
+    panner.positionY.value = yPos;
+    panner.positionZ.value = zPos;
+  } else {
+    panner.setPosition(xPos,yPos,zPos);
+  }
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}
+ +
+

listener と panner に設定された位置が正しく機能するためには、それらがスクリーン上の位置を正しく反映している必要があります。そのためには少し面倒な計算が必要となりますが、すこしやれば慣れる類のものです。

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状況コメント
{{SpecName('Web Audio API', '#widl-AudioContext-createPanner-PannerNode', 'createPanner()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザー互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/audiocontext/createperiodicwave/index.html b/files/ja/web/api/audiocontext/createperiodicwave/index.html new file mode 100644 index 0000000000..825a1a8de5 --- /dev/null +++ b/files/ja/web/api/audiocontext/createperiodicwave/index.html @@ -0,0 +1,139 @@ +--- +title: AudioContext.createPeriodicWave() +slug: Web/API/AudioContext/createPeriodicWave +translation_of: Web/API/BaseAudioContext/createPeriodicWave +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreatePeriodicWave()メソッドは、周期的な波形を定義するために使われる{{domxref("PeriodicWave")}}を生成します。これは{{ domxref("OscillatorNode") }}の出力を決めるために使われます。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var wave = audioCtx.createPeriodicWave(real, imag);
+ +

戻り値

+ +

{{domxref("PeriodicWave")}}

+ +

引数

+ +
+
real
+
余弦項の配列 (伝統的なA項)
+
imag
+
正弦項の配列 (伝統的なB項)
+
+ +

例

+ +

The following example illustrates simple usage of createPeriodicWave(), to create a {{domxref("PeriodicWave")}} object containing a simple sine wave.

+ +
var real = new Float32Array(2);
+var imag = new Float32Array(2);
+var ac = new AudioContext();
+var osc = ac.createOscillator();
+
+real[0] = 0;
+imag[0] = 0;
+real[1] = 1;
+imag[1] = 0;
+
+var wave = ac.createPeriodicWave(real, imag);
+
+osc.setPeriodicWave(wave);
+
+osc.connect(ac.destination);
+
+osc.start();
+osc.stop(2);
+ +

This works because a sound that contains only a fundamental tone is by definition a sine wave.
+
+ Here, we create a PeriodicWave with two values. The first value is the DC offset, which is the value at which the oscillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range.

+ +

The second and subsequent values are sine and cosine components. You can think of it as the result of a Fourier transform, where you get frequency domain values from time domain value. Here, with createPeriodicWave(), you specify the frequencies, and the browser performs a an inverse Fourier transform to get a time domain buffer for the frequency of the oscillator. Here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave.

+ +

The coefficients of the Fourier transform should be given in ascending order (i.e. (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}   etc.) and can be positive or negative.  A simple way of manually obtaining such coefficients (though not the best) is to use a graphing calculator.

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createPeriodicWave-PeriodicWave-Float32Array-real-Float32Array-imag', 'createPeriodicWave')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(33.0)}}
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/createscriptprocessor/index.html b/files/ja/web/api/audiocontext/createscriptprocessor/index.html new file mode 100644 index 0000000000..d3c80ae2cb --- /dev/null +++ b/files/ja/web/api/audiocontext/createscriptprocessor/index.html @@ -0,0 +1,69 @@ +--- +title: AudioContext.createScriptProcessor() +slug: Web/API/AudioContext/createScriptProcessor +translation_of: Web/API/BaseAudioContext/createScriptProcessor +--- +

{{ APIRef("AudioContext") }}

+
+

{{ domxref("AudioContext") }} の createScriptProcessor() メソッドを利用することで、ダイレクトな音声処理ができる {{domxref("ScriptProcessorNode")}} オブジェクトを作成できます。

+
+
+

注意: このノードの利用方法に関しては {{domxref("ScriptProcessorNode")}} をご覧ください。

+
+

構文

+
 ScriptProcessorNode             createScriptProcessor (optional unsigned long bufferSize = 0 , optional unsigned long numberOfInputChannels = 2 , optional unsigned long numberOfOutputChannels = 2 );
+

例

+

createScriptProcessor()の利用例は以下の通りになります。Web Audio API が提供する機能では望む音声処理を実現できない場合に、このメソッドを利用します。これを利用することで、どの様な音声処理でも記述できます。

+
SineWave = function(context) {
+  var that = this;
+  this.x = 0; // Initial sample number
+  this.context = context;
+  this.node = context.createScriptProcessor(1024, 1, 1);
+  this.node.onaudioprocess = function(e) { that.process(e) };
+}
+
+SineWave.prototype.process = function(e) {
+  var data = e.outputBuffer.getChannelData(0);
+  for (var i = 0; i < data.length; ++i) {
+    data[i] = Math.sin(this.x++);
+  }
+}
+
+SineWave.prototype.play = function() {
+  this.node.connect(this.context.destination);
+}
+
+SineWave.prototype.pause = function() {
+  this.node.disconnect();
+}
+

引数

+
+
+ bufferSize
+
+ サンプルフレームを単位としたバッファのサイズです。指定する場合は、次のいずれかの値でなくてはなりません: 256, 512, 1024, 2048, 4096, 8192, 16384 。指定されない場合、もしくは 0 が指定された場合、環境における最適な値が設定されます。この値はノードが生存する限り同じ値が利用され、その値は 2 の冪上です。
+
+ この値は audioprocess イベントの発生頻度と、イベントごとに渡されるサンプルフレームの大きさを決めます。小さい値を指定すると低遅延となり、大きな値を指定すると音声の破損やグリッチを避けられます。この値は自分で決めず、実装に決めさせることが遅延と品質の面から推奨されます。
+
+ numberOfInputChannels
+
+ 入力のチャンネル数を整数で指定します。デフォルト値は 2 で、最大 32 チャンネルまでサポートします。
+
+ numberOfOutputChannels
+
+ 出力するチャンネル数を整数で指定します。デフォルト値は 2 で、最大 32 チャンネルまでサポートします。
+
+
+

Important: Webkit currently (version 31) requires that a valid bufferSize be passed when calling this method.

+
+
+

注意: numberOfInputChannels と numberOfOutputChannels の両方に 0 を指定することはできません。

+
+

返り値

+

A {{domxref("ScriptProcessorNode")}}.

+

ブラウザ互換性

+

{{page("/en-US/docs/Web/API/AudioContext","Browser_compatibility")}}

+

仕様

+

{{page("/en-US/docs/Web/API/AudioContext","Specifications")}}

+

関連情報

+

{{page("/en-US/docs/Web/API/AudioContext","See_also")}}

diff --git a/files/ja/web/api/audiocontext/createstereopanner/index.html b/files/ja/web/api/audiocontext/createstereopanner/index.html new file mode 100644 index 0000000000..c77689aa90 --- /dev/null +++ b/files/ja/web/api/audiocontext/createstereopanner/index.html @@ -0,0 +1,128 @@ +--- +title: AudioContext.createStereoPanner() +slug: Web/API/AudioContext/createStereoPanner +translation_of: Web/API/BaseAudioContext/createStereoPanner +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateStereoPanner()メソッドは、音源にステレオパンニングを適用する{{ domxref("StereoPannerNode") }}を生成します。入力されたオーディオストリームは、低コストなequal-powerパンニングアルゴリズムで位置が決められます。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var panNode = audioCtx.createStereoPanner();
+ +

戻り値

+ +

{{domxref("StereoPannerNode")}}

+ +

例

+ +

このStereoPannerNodeサンプル(ソースコード)のHTMLには、{{htmlelement("audio")}}要素と、パン値を増減させるスライダー{{domxref("input")}}しかありません。JavaScpriptでは、{{domxref("MediaElementAudioSourceNode")}}と{{domxref("StereoPannerNode")}}を生成し、この2つをconnect()メソッドで接続しています。そして、スライダーを動かすと、oninputイベントハンドラで{{domxref("StereoPannerNode.pan")}}パラメータの値を変更し、ディスプレイのパン値を更新しています。

+ +

スライダーを左から右に動かすと、音楽のスピーカーからの出力が左から右にパンされます。

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var myAudio = document.querySelector('audio');
+
+var panControl = document.querySelector('.panning-control');
+var panValue = document.querySelector('.panning-value');
+
+pre.innerHTML = myScript.innerHTML;
+
+// MediaElementAudioSourceNodeを生成し、そこにHTMLMediaElementを入れる
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// ステレオパンナーを生成する
+var panNode = audioCtx.createStereoPanner();
+
+// イベントハンドラ関数で、スライダーが動いたとき左右のパンの値を左右する
+
+panControl.oninput = function() {
+  panNode.pan.value = panControl.value;
+  panValue.innerHTML = panControl.value;
+}
+
+// AudioBufferSourceNodeをpanNodeに接続し、panNodeを行き先(destination)に接続する
+// これでこのコントロールで音楽をパンを調整することができる
+source.connect(panNode);
+panNode.connect(audioCtx.destination);
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createStereoPanner-StereoPannerNode', 'createStereoPanner()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(37.0)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}37.02.2{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/currenttime/index.html b/files/ja/web/api/audiocontext/currenttime/index.html new file mode 100644 index 0000000000..0d2a92b3ea --- /dev/null +++ b/files/ja/web/api/audiocontext/currenttime/index.html @@ -0,0 +1,112 @@ +--- +title: AudioContext.currentTime +slug: Web/API/AudioContext/currentTime +translation_of: Web/API/BaseAudioContext/currentTime +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcurrentTime読み取り専用プロパティは、再生、タイムラインの可視化などのスケジューリングで使用できる単純増加するハードウェア時間をdoubleの秒数で返します。0から始まります。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+console.log(audioCtx.currentTime);
+ +

値

+ +

double

+ +

例

+ +
+

注: 完全な実装の例は、MDN Github repoのpanner-nodeなどを参照してください。audioCtx.currentTimeをあなたのブラウザで使ってみてください。

+
+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// 古いwebkit/blinkブラウザではプレフィックスが必要です
+
+...
+
+console.log(audioCtx.currentTime);
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/decodeaudiodata/index.html b/files/ja/web/api/audiocontext/decodeaudiodata/index.html new file mode 100644 index 0000000000..db9c106e52 --- /dev/null +++ b/files/ja/web/api/audiocontext/decodeaudiodata/index.html @@ -0,0 +1,155 @@ +--- +title: AudioContext.decodeAudioData() +slug: Web/API/AudioContext/decodeAudioData +tags: + - API + - Audio + - AudioContext + - BaseAudioContext + - Method + - Reference + - Web Audio API + - decodeAudioData +translation_of: Web/API/BaseAudioContext/decodeAudioData +--- +

{{ APIRef("Web Audio API") }}

+ +

decodeAudioData() は {{ domxref("BaseAudioContext") }} のメソッドで、 {{domxref("ArrayBuffer")}} に書き込まれた音声ファイルデータを非同期にデコードするために使用されます。この場合、 ArrayBuffer は {{domxref("XMLHttpRequest")}} と {{domxref("FileReader")}} から読み込まれます。デコードされた {{domxref("AudioBuffer")}} は {{domxref("AudioContext")}} のサンプリングレートにリサンプリングされ、コールバックやプロミスに渡されます。

+ +

この方法は、オーディオトラックから Web Audio API 用のオーディオソースを作成する際に推奨される方法です。この方法は、音声ファイルの断片的なデータではなく、完全なファイルデータに対してのみ動作します。

+ +

構文

+ +

古いコールバック構文:

+ +
baseAudioContext.decodeAudioData(ArrayBuffer, successCallback, errorCallback);
+ +

新しいプロミスベースの構文:

+ +
Promise<decodedData> baseAudioContext.decodeAudioData(ArrayBuffer);
+ +

引数

+ +
+
ArrayBuffer
+
デコードする音声データが入った ArrayBuffer です。通常は{{domxref("XMLHttpRequest")}}, {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, {{domxref("FileReader")}} から取得します。
+
successCallback
+
デコードが完了すると呼び出されるコールバック関数です。このコールバックの引数は1つで、 decodedData (デコードされた PCM 音声データ) を表す {{domxref("AudioBuffer")}} です。通常は、デコードされたデータを {{domxref("AudioBufferSourceNode")}} に入れて、そこから再生したり、好きなように操作したりすることができます。
+
errorCallback
+
任意のエラーコールバックで、音声データのデコードでエラーが発生すると呼び出されます。
+
+ +

返値

+ +

なし、または decodedData で満足する {{domxref("Promise") }} オブジェクトで.

+ +

例

+ +

ここでは最初に古いコールバックベースのシステムを、次に新しいプロミスベースの構文を取り上げます。

+ +

古いコールバックベースの構文

+ +

この例では、 getData() 関数は XHR を使用して音声トラックを読み込み、リクエストの responseType を arraybuffer に設定して、レスポンスとして配列バッファーを返すようにして、それを audioData 変数に格納しています。それからこのバッファーを decodeAudioData() 関数に渡します。成功したコールバックは、デコードに成功した PCM データを受け取り、 {{ domxref("AudioContext.createBufferSource()") }} で作成した {{ domxref("AudioBufferSourceNode") }} に入れ、ソースを {{domxref("AudioContext.destination") }} に接続してループするように設定します。

+ +

ボタンは単に getData() を実行して、それぞれトラックの読み込みと再生、停止を行うだけです。ソースの stop() メソッドが呼ばれると、ソースは消滅します。

+ +
+

注: ライブ例の実行 (またはソースの閲覧) もできます。

+
+ +
// 変数の定義
+
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var source;
+
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+// 音声トラックの読み込みには XHR を使い、
+// decodeAudioData でデコードし、バッファーに格納する
+// そして、そのバッファーを source に設定する
+
+function getData() {
+  source = audioCtx.createBufferSource();
+  var request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        source.buffer = buffer;
+
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){ console.log("Error with decoding audio data" + e.err); });
+
+  }
+
+  request.send();
+}
+
+// 音声の停止と再生を行うボタン
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+}
+
+
+// pre要素にスクリプトを設定する
+
+pre.innerHTML = myScript.innerHTML;
+ +

新しいプロミスベースの構文

+ +
ctx.decodeAudioData(audioData).then(function(decodedData) {
+ // デコードしたデータをここで使う
+});
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様状態備考
{{SpecName('Web Audio API', '#dom-baseaudiocontext-decodeaudiodata', 'decodeAudioData()')}}{{Spec2('Web Audio API')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.BaseAudioContext.decodeAudioData")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/audiocontext/destination/index.html b/files/ja/web/api/audiocontext/destination/index.html new file mode 100644 index 0000000000..f93e8682f1 --- /dev/null +++ b/files/ja/web/api/audiocontext/destination/index.html @@ -0,0 +1,114 @@ +--- +title: AudioContext.destination +slug: Web/API/AudioContext/destination +translation_of: Web/API/BaseAudioContext/destination +--- +

{{ APIRef("Web Audio API") }}

+ +
+

インターフェースのdestinationプロパティは、コンテキストの全ての音声の最終的な行き先を表す{{ domxref("AudioDestinationNode") }} を戻します。これは、あなたのコンピュータのスピーカーのような、オーディオレンダリングデバイスと考えることができます。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+gainNode.connect(audioCtx.destination);
+ +

値

+ +

{{ domxref("AudioDestinationNode") }}

+ +

例

+ +
+

注: 完全な実装の例は、MDN Github repoのpanner-nodeなどを参照してください。

+
+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// 古いwebkit/blinkブラウザではプレフィックスが必要です
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillatorNode.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-destination', 'destination')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/index.html b/files/ja/web/api/audiocontext/index.html new file mode 100644 index 0000000000..7af0ee7313 --- /dev/null +++ b/files/ja/web/api/audiocontext/index.html @@ -0,0 +1,107 @@ +--- +title: AudioContext +slug: Web/API/AudioContext +tags: + - API +translation_of: Web/API/AudioContext +--- +

{{APIRef("Web Audio API")}}

+ +

AudioContext インターフェイスは{{domxref("AudioNode")}}によって表現され、一緒にリンクした音声モジュールから作った音声処理グラフを表します。音声コンテキストはコンテキストを含むノードの作成と音声処理もしくはデコードの実行の両方を制御します。コンテキスト内部で全てのことが起こるので、何かをする前に AudioContext を作る必要があります。

+ +

{{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{domxref("AudioContext.AudioContext", "AudioContext()")}}
+
AudioContext オブジェクトを新しく作成し、返します。
+
+ +

プロパティ

+ +

親インターフェイス{{domxref("BaseAudioContext")}}からプロパティを継承します。

+ +
+
{{domxref("AudioContext.baseLatency")}} {{readonlyinline}} {{experimental_inline}}
+
{{domxref("AudioDestinationNode")}}から音声サブシステムまでの音声を渡す{{domxref("AudioContext")}}によって起きる処理レイテンシーの秒数を返します。
+
{{domxref("AudioContext.outputLatency")}} {{readonlyinline}} {{experimental_inline}}
+
現在の音声コンテキストの出力レイテンシーの見積もりを返します。
+
+ +

メソッド

+ +

親インターフェイス{{domxref("BaseAudioContext")}} からメソッドを継承します。

+ +
+
{{domxref("AudioContext.close()")}}
+
任意のシステム音声リソースをリリースするために、音声コンテキストを閉じます。
+
{{domxref("AudioContext.createMediaElementSource()")}}
+
{{domxref("HTMLMediaElement")}}と関連付けられた{{domxref("MediaElementAudioSourceNode")}}を生成します。これは{{HTMLElement("video")}}要素もしくは{{HTMLElement("audio")}}要素からの再生や操作をするために使うことができます。
+
{{domxref("AudioContext.createMediaStreamSource()")}}
+
ローカルのコンピューターのマイクもしくは他のソースから来る音声ストリームを表現している{{domxref("MediaStream")}}と関連付けられた{{domxref("MediaStreamAudioSourceNode")}}を生成します。
+
{{domxref("AudioContext.createMediaStreamDestination()")}}
+
ローカルファイルに保存されたものかその他のコンピューターに送信された音声ストリームを表している{{domxref("MediaStream")}}と関連付けられた{{domxref("MediaStreamAudioDestinationNode")}}を生成します
+
{{domxref("AudioContext.createMediaStreamTrackSource()")}}
+
メディアストリームトラックを表している{{domxref("MediaStream")}}と関連づけられた{{domxref("MediaStreamTrackAudioSourceNode")}}を生成します。
+
{{domxref("AudioContext.getOutputTimestamp()")}}
+
二つの関連づけられたコンテキストの音声ストリームの位置の値を含んでいる AudioTimestamp オブジェクトを新しく返します。
+
{{domxref("AudioContext.suspend()")}}
+
一時的に音声ハードウェアアクセスを停止し、プロセスの CPU/バッテリー使用を減らすために、音声コンテキストの時間の進行を中断します。
+
+

非推奨メソッド

+
+
{{domxref("AudioContext.resume()")}}
+
あらかじめ中断させられた音声コンテキストの時間の進行を返します。
+
+

注意: resume() メソッドはまだ利用することができます。このメソッドは{{domxref("BaseAudioContext")}}インターフェイス({{domxref("BaseAudioContext.resume()")}}を見てください)上で現在定義されています。したがって、{{domxref("AudioContext")}}インターフェイスと{{domxref("OfflineAudioContext")}}インターフェイスの両方でアクセスすることができます。

+
+
+ +

例

+ +

基本的な音声コンテキストの作成方法:

+ +
var audioCtx = new AudioContext();
+ +

クロスブラウザー対応版:

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('Web Audio API', '#AudioContext', 'AudioContext')}}{{Spec2('Web Audio API')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.AudioContext")}}

+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/listener/index.html b/files/ja/web/api/audiocontext/listener/index.html new file mode 100644 index 0000000000..7b4f394727 --- /dev/null +++ b/files/ja/web/api/audiocontext/listener/index.html @@ -0,0 +1,112 @@ +--- +title: AudioContext.listener +slug: Web/API/AudioContext/listener +translation_of: Web/API/BaseAudioContext/listener +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのlistenerプロパティは、3次元音声を実装するために使う{{ domxref("AudioListener") }}オブジェクトを返します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var myListener = audioCtx.listener;
+ +

値

+ +

{{ domxref("AudioListener") }}

+ +

例

+ +
+

注: 完全な実装の例は、panner-nodeを参照してください。

+
+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// 古いwebkit/blinkブラウザではプレフィックスが必要です
+
+...
+
+var myListener = audioCtx.listener;
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-listener', 'listener')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/mozaudiochanneltype/index.html b/files/ja/web/api/audiocontext/mozaudiochanneltype/index.html new file mode 100644 index 0000000000..62f6879ebe --- /dev/null +++ b/files/ja/web/api/audiocontext/mozaudiochanneltype/index.html @@ -0,0 +1,95 @@ +--- +title: AudioContext.mozAudioChannelType +slug: Web/API/AudioContext/mozAudioChannelType +translation_of: Web/API/AudioContext/mozAudioChannelType +--- +

{{APIRef("Web Audio API")}} {{Non-standard_header}}

+ +

{{domxref("AudioContext")}}インターフェースのmozAudioChannelType読み取り専用プロパティは、Firefox OS デバイスで、オーディオコンテキスト要素で再生される音声を再生するオーディオチャンネルを設定するために使えます。

+ +

これはAudioChannels APIに定義された非標準のプロパティです。詳細はUsing the AudioChannels APIを参照してください。

+ +

構文

+ +
var audioCtx = new AudioContext();
+var myAudioChannelType = audioCtx.mozAudioChannelType;
+
+ +

AudioContextのオーディオチャンネルタイプを設定できるのは、次のコンストラクタを使う場合のみです。

+ +
var audioCtx = new AudioContext('ringer');
+ +

値

+ +

{{domxref("DOMString")}}

+ +

例

+ +

TBD

+ +

仕様

+ +

現在はAudioChannels APIには公式の仕様はありません。実装、WebIDLなどの詳細はhttps://wiki.mozilla.org/WebAPI/AudioChannelsを参照してください。

+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
General support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
General support{{CompatNo}}{{CompatNo}}{{CompatNo}}1.2{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/onstatechange/index.html b/files/ja/web/api/audiocontext/onstatechange/index.html new file mode 100644 index 0000000000..5ce3ecaf26 --- /dev/null +++ b/files/ja/web/api/audiocontext/onstatechange/index.html @@ -0,0 +1,101 @@ +--- +title: AudioContext.onstatechange +slug: Web/API/AudioContext/onstatechange +translation_of: Web/API/BaseAudioContext/onstatechange +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのonstatechangeプロパティは、{{Event("statechange")}}イベントが発火した(これはオーディオコンテキストの状態が変わったとき発生します)とき呼ばれるイベントハンドラ関数を定義します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+audioCtx.onstatechange = function() { ... };
+ +

例

+ +

次のスニペットはAudioContext states デモの一部です(すぐに実行)。{{domxref("AudioContext.onstatechange")}}ハンドラは、状態が変わるたびにコンソールにログを出力するために使われています。

+ +
audioCtx.onstatechange = function() {
+  console.log(audioCtx.state);
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-onstatechange', 'onstatechange')}}{{Spec2('Web Audio API')}} 
+ +

互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(43.0)}}{{CompatGeckoDesktop(40.0)}} {{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/resume/index.html b/files/ja/web/api/audiocontext/resume/index.html new file mode 100644 index 0000000000..d6e8ac7e27 --- /dev/null +++ b/files/ja/web/api/audiocontext/resume/index.html @@ -0,0 +1,74 @@ +--- +title: AudioContext.resume() +slug: Web/API/AudioContext/resume +translation_of: Web/API/AudioContext/resume +--- +

{{ APIRef("Web Audio API") }}

+ +

{{ domxref("AudioContext") }}インターフェースのresume()メソッドは、一時停止されたオーディオコンテキストの時間の流れを再開します。

+ +

{{domxref("OfflineAudioContext")}}でこのメソッドを呼ぶとINVALID_STATE_ERR例外が発生します。

+ +

構文

+ +
Promise<> baseAudioContext.resume();
+
+ +

引数

+ +

なし

+ +

戻り値

+ +

voidで完了する{{jsxref("Promise")}}。コンテキストが既に閉じている場合、プロミスは失敗します。

+ +

例

+ +

次のスニペットはAudioContext states デモ(すぐ実行)から取ったものです。suspend/resumeボタンをクリックすると、{{domxref("AudioContext.state")}}を問い合わせます—もしrunningならば、{{domxref("suspend()")}}が呼ばれます。suspendedならば、resume()が呼ばれます。両方ともプロミスに成功するとボタンのラベルが適したものに更新されます。

+ +
susresBtn.onclick = function() {
+  if(audioCtx.state === 'running') {
+    audioCtx.suspend().then(function() {
+      susresBtn.textContent = 'Resume context';
+    });
+  } else if(audioCtx.state === 'suspended') {
+    audioCtx.resume().then(function() {
+      susresBtn.textContent = 'Suspend context';
+    });
+  }
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-resume', 'resume()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
+
+ + +

{{Compat("api.BaseAudioContext.resume")}}

+
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/samplerate/index.html b/files/ja/web/api/audiocontext/samplerate/index.html new file mode 100644 index 0000000000..8715d8ae39 --- /dev/null +++ b/files/ja/web/api/audiocontext/samplerate/index.html @@ -0,0 +1,112 @@ +--- +title: AudioContext.sampleRate +slug: Web/API/AudioContext/sampleRate +translation_of: Web/API/BaseAudioContext/sampleRate +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのsampleRateプロパティは、このオーディオコンテキストの全てのノードで使われるサンプルレート(1秒あたりのサンプル数)を浮動小数点で返します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var mySampleRate = audioCtx.sampleRate;
+ +

値

+ +

浮動小数点

+ +

例

+ +
+

注: 完全な実装の例は、MDN Github repoのpanner-nodeなどを参照してください。audioCtx.sampleRateをあなたのブラウザで使ってみてください。

+
+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// 古いwebkit/blinkブラウザではプレフィックスが必要です
+
+...
+
+console.log(audioCtx.sampleRate);
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-sampleRate', 'sampleRate')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/state/index.html b/files/ja/web/api/audiocontext/state/index.html new file mode 100644 index 0000000000..a19d03f9af --- /dev/null +++ b/files/ja/web/api/audiocontext/state/index.html @@ -0,0 +1,66 @@ +--- +title: AudioContext.state +slug: Web/API/AudioContext/state +translation_of: Web/API/BaseAudioContext/state +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのstate読取専用プロパティは、現在のAudioContextの状態を返します。

+
+ +

構文

+ +
baseAudioContext.state;
+ +

値

+ +

{{domxref("DOMString")}}。取りうる値は:

+ + + +

例

+ +

次のスニペットはAudioContext states デモの一部です(すぐに実行)。{{domxref("AudioContext.onstatechange")}}ハンドラは、状態が変わるたびにコンソールにログを出力するために使われています。

+ +
audioCtx.onstatechange = function() {
+  console.log(audioCtx.state);
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-state', 'state')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
+
+ + +

{{Compat("api.BaseAudioContext.state")}}

+
+
+ +

参考

+ + diff --git a/files/ja/web/api/audiocontext/suspend/index.html b/files/ja/web/api/audiocontext/suspend/index.html new file mode 100644 index 0000000000..fd69565f65 --- /dev/null +++ b/files/ja/web/api/audiocontext/suspend/index.html @@ -0,0 +1,69 @@ +--- +title: AudioContext.suspend() +slug: Web/API/AudioContext/suspend +translation_of: Web/API/AudioContext/suspend +--- +

{{ APIRef("Web Audio API") }}

+ +

suspend()メソッドは、オーディオコンテキストの時間の流れを一時停止します。音声ハードウェアへのアクセスを一時的に停止し、処理に必要だったCPU/バッテリーの使用を減らすことが出来ます。これは、アプリケーションがしばらくの間オーディオを扱わない間に、音声ハードウェアに電源を供給しないようにしたいときに便利です。

+ +

{{domxref("OfflineAudioContext")}}でこのメソッドを呼ぶとINVALID_STATE_ERR例外が発生します。

+ +

構文

+ +
var audioCtx = new AudioContext();
+audioCtx.suspend().then(function() { ... });
+
+ +

戻り値

+ +

voidで完了する{{jsxref("Promise")}}。コンテキストが既に閉じている場合、プロミスは失敗します。

+ +

例

+ +

次のスニペットはAudioContext states デモ(すぐ実行)から取ったものです。suspend/resumeボタンをクリックすると、{{domxref("AudioContext.state")}}を問い合わせます—もしrunningならば、suspend()が呼ばれます。suspendedならば、{{domxref("resume")}}が呼ばれます。両方ともプロミスに成功するとボタンのラベルが適したものに更新されます。

+ +
susresBtn.onclick = function() {
+  if(audioCtx.state === 'running') {
+    audioCtx.suspend().then(function() {
+      susresBtn.textContent = 'Resume context';
+    });
+  } else if(audioCtx.state === 'suspended') {
+    audioCtx.resume().then(function() {
+      susresBtn.textContent = 'Suspend context';
+    });
+  }
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-suspend-Promise-void', 'close()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
+ + +

{{Compat("api.AudioContext.suspend")}}

+
+ +

参考

+ + -- cgit v1.2.3-54-g00ecf