---
title: AudioContext.createMediaElementSource()
slug: Web/API/AudioContext/createMediaElementSource
translation_of: Web/API/AudioContext/createMediaElementSource
---
<p>{{ APIRef("Web Audio API") }}</p>

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

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

<h2 id="構文">構文</h2>

<pre class="brush: js">var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);</pre>

<h3 id="引数">引数</h3>

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

<h3 id="戻り値">戻り値</h3>

<p>{{domxref("MediaElementAudioSourceNode")}}</p>

<h2 id="例">例</h2>

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

<div class="note">
<p><strong>注記</strong>:  <a href="http://mdn.github.io/media-source-buffer/">この例のデモ</a>と、<a href="https://github.com/mdn/media-source-buffer">ソース</a>を見ることができます。</p>
</div>

<pre class="brush: js">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);</pre>

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

<h2 id="仕様">仕様</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', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}</td>
   <td>{{Spec2('Web Audio API')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="ブラウザの互換性">ブラウザの互換性</h2>

<p>{{Compat("api.AudioContext.createMediaElementSource")}}</p>

<h2 id="関連情報">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Web Audio APIの利用</a></li>
</ul>