From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../createmediaelementsource/index.html | 154 +++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/ja/web/api/audiocontext/createmediaelementsource/index.html (limited to 'files/ja/web/api/audiocontext/createmediaelementsource') 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
+
+ +

関連情報

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