path: root/files/ja/web/api/web_audio_api/index.html

---
title: Web Audio API
slug: Web/API/Web_Audio_API
tags:
  - API
  - Audio
  - Example
  - Landing
  - Overview
  - Web Audio API
  - sound
translation_of: Web/API/Web_Audio_API
---
<div>{{DefaultAPISidebar("Web Audio API")}}</div>

<p class="summary">Web Audio API はウェブ上で音声を扱うための強力で多機能なシステムを提供します。これにより開発者は音源を選択したり、エフェクトを加えたり、ビジュアライゼーションを加えたり、パンニングなどの特殊効果を適用したり、他にもたくさんのいろいろなことができるようになります。</p>

<h2 id="Web_audio_concepts_and_usage" name="Web_audio_concepts_and_usage">Web audio の概念と利用方法</h2>

<p>Web Audio API は音声操作を<strong>オーディオコンテキスト</strong>内の操作として実現し、モジュラールーティングできるようにデザインされています。基本的な操作は <strong>オーディオノード</strong>として表現されています。これを接続することで、オーディオグラフを作成します。チャンネル構成の異なる複数の音源も 1 つのコンテキスト内で扱えます。この構成によって、複雑で動的な音声操作を実現できるようになっています。</p>

<p>オーディオノードは、入力と出力によってチェーンと単純なウェブにリンクされています。通常、1 つまたは複数の音源から始まります。音源は、非常に小さなタイムスライス、多くの場合は 1秒間に数万個のサウンドインテンシティ (サンプル) の配列を提供します。これらは数学的に計算されたもの ({{domxref("OscillatorNode")}} など) や、音声ファイルや動画ファイル ({{domxref("AudioBufferSourceNode")}} や {{domxref("MediaElementAudioSourceNode")}} など) やオーディオストリーム ({{domxref("MediaStreamAudioSourceNode")}}) からの録音である場合もあります。実際には、サウンドファイルは、マイクや電気楽器から入ってきた音の強さそのものを録音したものであり、それがミックスされて一つの複雑な波になっています。</p>

<p>ノードの出力は他のノードの入力に紐付けられます。つまり、入力ストリームにミックスや編集をして他へ出力できるわけです。一般的な編集の例としては音量の変更です( {{domxref("GainNode")}} )。意図した効果を十分に施したあと、ユーザーに音声を聞かせたい場合、サウンドをスピーカーやヘッドオンに流すために、{{domxref("AudioContext.destination")}} の入力に紐付ける必要があります。</p>

<p>簡潔で通常の Web Audio の使い方は次のようになります:</p>

<ol>
 <li>オーディオコンテキストを作成する</li>
 <li>コンテキストの中で、<code>&lt;audio&gt;</code>,オシレーター,ストリームなどの音源を作成する</li>
 <li>リバーブ・フィルター・パンナー・コンプレッサーなどのエフェクトノードを作成する</li>
 <li>最終的な音声の到達先を選ぶ(例えばスピーカー)</li>
 <li>音源をエフェクトに繋げ、エフェクトを到達先(destination)に繋げる</li>
</ol>

<p><img alt="オーディオコンテキストと書かれた外側のボックスと、音源、エフェクト、デスティネーションと書かれた3つのボックスからなるシンプルなボックスダイアグラムです。3つのボックスの間には矢印があり、オーディオ情報の流れを示しています。" src="https://mdn.mozillademos.org/files/16043/audio-context_.png" style="height: 400px; width: 1200px;"></p>

<p>タイミングは高精度で低遅延に制御されます。正確にイベントに反応したり特定の音声サンプルにアクセスしたりすることができます。ドラムマシンやシーケンサーのようなアプリケーションを作ることができます。</p>

<p>Web Audio API では、立体音響を制御することもできます。<em>ソースリスナーモデル</em>に基づいたシステムを使用することで、<em>パンモデル</em>を制御し、音源の移動 (またはリスナーの移動) によって引き起こされる<em>距離に起因する減衰</em>を処理することができます。</p>

<div class="note">
<p>Web Audio API の理論に関する詳細は <a href="/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a> をご覧ください。</p>
</div>

<h2 id="Web_Audio_API_target_audience" name="Web_Audio_API_target_audience">Web Audio API がターゲットとする人</h2>

<p>Web Audio API は音声技術に馴染みがない人にとって、怖気づくかもしれません。また、多くの機能があるため、開発者にとってとっつきにくいものになっています。</p>

<p>Web Audio API の用途としては、<a href="https://www.futurelibrary.no/">futurelibrary.no</a> のような雰囲気作りのためや<a href="https://css-tricks.com/form-validation-web-audio/">フォームの検証に音を活用</a>するために、単に音声をウェブサイトに組み込むために使用できます。一方で、高度な対話型ツールの作成にも利用できます。こうしたことを踏まえると、開発者とミュージシャンの双方に適していると言えます。</p>

<p>プログラミングは得意だけど API の構造と用語の解説が必要な人のために、<a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">簡単なチュートリアル</a>があります。</p>

<p>また、<a href="/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Web Audio API の背景にある基本理念</a>に関する記事もあり、特にこの API の範囲でデジタルオーディオがどのように動作するのかを理解するのに役立ちます。また API の基礎となる優れた概念の紹介も含んでいます。</p>

<p>プログラムを書く作業はカードゲームに例えられます。ルールを学んで遊んでみて、またルールを学んで再び遊んでみて・・・。したがって最初のチュートリアルと記事を見たあとにピンとこなかった場合、最初のチュートリアルを拡張して、学んだことを実践して、段階的に高度なことを学んでいく<a href="/ja/docs/Web/API/Web_Audio_API/Advanced_techniques">発展的なチュートリアル</a>があります。</p>

<p>それとは別に、この API のすべての機能を網羅したチュートリアルとリファレンスを用意しています。このページのサイドバーを参照してください。</p>

<p><span class="tlid-translation translation" lang="ja">音楽的な側面に精通し、音楽理論の概念に精通し、楽器の構築を開始したい場合は</span>、発展的チュートリアルやその他の解説を基に制作に移る事ができるでしょう(上記のリンク付きチュートリアルでは、スケジューリングに関する注意事項、オーダーメイドの発振器やエンベロープの作成、LFO などについて説明しています) 。</p>

<p>プログラミングの基本に慣れていない場合は、まず初級者向けの JavaScript チュートリアルを参照してから、このページに戻ってください。<a href="/ja/docs/Learn/JavaScript">初級者向けの JavaScript学習モジュール</a>を参照してください。</p>

<h2 id="Web_Audio_API_interfaces" name="Web_Audio_API_interfaces">Web Audio API インターフェイス</h2>

<p>Web Audio API は全部で 28 のインターフェイスと関連するイベントを持ちます。それらは機能的に 9 個のカテゴリに分けられます。</p>

<h3 id="General_audio_graph_definition" name="General_audio_graph_definition">一般的なオーディオグラフの定義</h3>

<p>Web Audio API で利用するオーディオグラフのコンテナと、その構成要素は以下の通りです。</p>

<dl>
 <dt>{{domxref("AudioContext")}}</dt>
 <dd>音声モジュールを組み合わせて作成される、音声処理のグラフを表します。グラフ内の各モジュールは {{domxref("AudioNode")}} として表現されています。オーディオコンテキストは、コンテキスト内での処理を担当するノードの作成を行います。</dd>
 <dt>{{domxref("AudioContextOptions")}}</dt>
 <dd><code><strong>AudioContextOptions</strong></code> は <code>AudioContext</code> を作成するときにオプションを渡したいときに使用します。</dd>
 <dt>{{domxref("AudioNode")}}</dt>
 <dd><strong><code>AudioNode</code></strong> インターフェイスは音声処理のモジュールの表現しています。これには{{HTMLElement("audio")}}要素や{{HTMLElement("video")}} 要素のような音源、音声の出力先、{{domxref("BiquadFilterNode")}} や {{domxref("GainNode")}}) のようなフィルターなどが含まれます。</dd>
 <dt>{{domxref("AudioParam")}}</dt>
 <dd><strong><code>AudioParam</code></strong> インターフェイスは {{domxref("AudioNode")}} の持つような、音声に関するパラメータを表現しています。値をセットするだけでなく、差分を指定することも可能です。また指定した時間やパターンで、値を変更をすることもできます。</dd>
 <dt>{{domxref("AudioParamMap")}}</dt>
 <dd>{{domxref("AudioParam")}} のマップのようなインターフェイスを提供します。つまり <code>forEach()</code>、<code>get()</code>、<code>has()</code>、<code>keys()</code>、<code>values()</code> メソッドや <code>size</code> プロパティが使えます。</dd>
 <dt>{{domxref("BaseAudioContext")}}</dt>
 <dd><strong><code>BaseAudioContext</code></strong> インターフェイスはオンライン音声処理グラフ( {{domxref("AudioContext")}})やオフライン音声処理グラフ( {{domxref("OfflineAudioContext")}})の基底となるものです。直接 <code>BaseAudioContext</code> を使うことはなく、これを継承するこれら 2 つのインターフェイスを介して使用します。</dd>
 <dt>{{event("ended_(Web_Audio)", "ended")}} (event)</dt>
 <dd><code>ended</code> イベントは、再生が終了した際に発火するイベントです。</dd>
</dl>

<h3 id="Defining_audio_sources" name="Defining_audio_sources">音源の定義</h3>

<p>Web Audio API 内で利用できる音源は以下の通りです。</p>

<dl>
 <dt>{{domxref("AudioScheduledSourceNode")}}</dt>
 <dd><strong><code>AudioScheduledSourceNode</code></strong> は {{domxref("AudioNode")}} の一種で、いくつかの音源ノードの親インターフェイスです。</dd>
 <dt>{{domxref("OscillatorNode")}}</dt>
 <dd><strong><code style="font-size: 14px;">OscillatorNode</code></strong> はサイン波を出力する {{domxref("AudioNode")}} です。出力する波形の周波数を指定できます。</dd>
 <dt>{{domxref("AudioBuffer")}}</dt>
 <dd> <strong><code>AudioBuffer</code></strong> はメモリー上に展開された短い音声データを表します。{{ domxref("AudioContext.createBuffer()") }} によって音声ファイルから、もしくは{{ domxref("AudioContext.createBuffer()") }} メソッドによって生データから作成されます。このデータは {{ domxref("AudioBufferSourceNode") }} を利用して再生されます。</dd>
 <dt>{{domxref("AudioBufferSourceNode")}}</dt>
 <dd><strong><code>AudioBufferSourceNode</code></strong> は {{domxref("AudioNode")}} の一種で、メモリー上の音声データを利用した音源です。音声データ自身は {{domxref("AudioBuffer")}} として保存されています。</dd>
 <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
 <dd><code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> は {{domxref("AudioNode")}} の一種で、{{ htmlelement("audio") }} 要素や {{ htmlelement("video") }} 要素を利用する音源です。</dd>
 <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
 <dd><code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> は {{domxref("AudioNode")}} の一種で、マイクや Web カメラといった <a href="/ja/docs/WebRTC" title="/ja/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} からの入力を扱える音源です。複数の音声トラックがストリーム上にある場合、{{domxref("MediaStreamTrack.id", "id")}} は辞書順(アルファベット順)です。</dd>
 <dt>{{domxref("MediaStreamTrackAudioSourceNode")}}</dt>
 <dd><code>MediaStreamTrackAudioSourceNode</code> は{{domxref("AudioNode")}} の一種で、{{domxref("MediaStreamTrack")}} からの入力を扱える音源です。{{domxref("AudioContext.createMediaStreamTrackSource", "createMediaStreamTrackSource()")}} メソッドによって作られたノードの場合、使用するトラックを指定してください。<code>MediaStreamAudioSourceNode</code> 以上の制御を提供します。</dd>
</dl>

<h3 id="Defining_audio_effects_filters" name="Defining_audio_effects_filters">オーディオエフェクトフィルターの定義</h3>

<p>これらを利用すると、音源からの音声にエフェクトをかけられます。</p>

<dl>
 <dt>{{domxref("BiquadFilterNode")}}</dt>
 <dd><strong><code>BiquadFilterNode</code></strong> は {{domxref("AudioNode")}} の一種で、単純な低次フィルターです。フィルターやトーンコントロール、グラフィックイコライザで利用されます。<code>BiquadFilterNode</code> の入力と出力はともに 1 つです。</dd>
 <dt>{{domxref("ConvolverNode")}}</dt>
 <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong> は<span style="line-height: 1.5;">{{domxref("AudioNode")}} の一種で、Audiobuffer に対して線形畳み込みを行います。リバーブの実現に利用されます。</span></dd>
 <dt>{{domxref("DelayNode")}}</dt>
 <dd><strong><code>DelayNode</code></strong> は {{domxref("AudioNode")}} の一種で、<a href="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a> を表します。入力された音声を、遅らせて出力します。</dd>
 <dt>{{domxref("DynamicsCompressorNode")}}</dt>
 <dd><strong><code>DynamicsCompressorNode</code></strong> はコンプレッサとして働きます。大きな音の音量を絞ることで、複数の音を同時に再生した時に起きがちな、音のクリッピングや歪みを回避します。</dd>
 <dt>{{domxref("GainNode")}}</dt>
 <dd><strong><code>GainNode</code></strong> は {{domxref("AudioNode")}} の一種で、入力された音の音量を指定されたものに変更して出力します。</dd>
 <dt>{{domxref("WaveShaperNode")}}</dt>
 <dd><strong><code>WaveShaperNode</code></strong> は {{domxref("AudioNode")}} の一種で、非線形のディストーションエフェクトを実現します。curve 属性に指定された関数を用いて、入力を歪ませます。音を歪ませ、温かみを与えるために用いられます。</dd>
 <dt>{{domxref("PeriodicWave")}}</dt>
 <dd>{{ domxref("OscillatorNode") }} の出力の波形を変えるために用いられます。</dd>
 <dt>{{domxref("IIRFilterNode")}}</dt>
 <dd>一般的な<a href="https://ja.wikipedia.org/wiki/%E7%84%A1%E9%99%90%E3%82%A4%E3%83%B3%E3%83%91%E3%83%AB%E3%82%B9%E5%BF%9C%E7%AD%94">無限インパルス応答(IIR)</a>フィルターの実装です。トーン制御デバイスやグラフィックイコライザーの実装に利用できます。</dd>
</dl>

<h3 id="Defining_audio_destinations" name="Defining_audio_destinations">音声の出力先の定義</h3>

<p>処理した音声の出力先を、以下のもので定めます。</p>

<dl>
 <dt>{{domxref("AudioDestinationNode")}}</dt>
 <dd><strong><code>AudioDestinationNode</code></strong> はコンテキスト内での出力先を表します。通常はスピーカとなっています。</dd>
 <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
 <dd><code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> は音声の出力先となる {{domxref("AudioNode")}} の一種で、<a href="/ja/docs/WebRTC" title="/ja/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} と 1 つの <code>AudioMediaStreamTrack</code> から構成されます。{{ domxref("Navigator.getUserMedia") }} で取得された MediaStream と同様に扱えます。</dd>
</dl>

<h3 id="Data_analysis_and_visualization" name="Data_analysis_and_visualization">分析と可視化</h3>

<p>音声の時間領域 / 周波数領域分析には、<code>AnalyserNode</code> を利用します。</p>

<dl>
 <dt>{{domxref("AnalyserNode")}}</dt>
 <dd><strong><code>AnalyserNode</code></strong> を利用すると、音声のリアルタイムに時間領域分析と周波数領域分析が行えます。これを利用すると、音声の可視化が行えます。</dd>
</dl>

<h3 id="Splitting_and_merging_audio_channels" name="Splitting_and_merging_audio_channels">オーディオチャンネルの分岐と合成</h3>

<p>オーディオチャンネルを分岐したり合成したりするのにこれらのインターフェイスを使います。</p>

<dl>
 <dt>{{domxref("ChannelSplitterNode")}}</dt>
 <dd>The <code><strong>ChannelSplitterNode</strong></code> は音源の複数のチャンネルを別々のモノラル出力へ分離します。</dd>
 <dt>{{domxref("ChannelMergerNode")}}</dt>
 <dd><code><strong>ChannelMergerNode</strong></code> は異なるモノラルの入力を、1 つの出力へとまとめます。それぞれの入力は、出力内のチャンネルとなります。</dd>
</dl>

<h3 id="Audio_spatialization" name="Audio_spatialization">立体音響</h3>

<p>これらのインターフェイスを使用すると、立体音響のパンニング効果を音源に追加することができます。</p>

<dl>
 <dt>{{domxref("AudioListener")}}</dt>
 <dd><strong><code>AudioListener</code></strong> インターフェイスは聴者の向きと位置を表します。</dd>
 <dt>{{domxref("PannerNode")}}</dt>
 <dd><strong><code>PannerNode</code></strong> は {{domxref("AudioNode")}} の一種で、空間内での音の振る舞いを規定します。位置はカルテシアンの右手座標系で表され、速度ベクトルで動きを表します。向きはコーンの向きで表現します。</dd>
 <dt>{{domxref("StereoPannerNode")}}</dt>
 <dd><code><strong>StereoPannerNode</strong></code> インターフェイスは単純なステレオプランナーで、音声ストリームのパン(左右バランス)を調整できます。</dd>
</dl>

<h3 id="Audio_processing_in_JavaScript" name="Audio_processing_in_JavaScript">JavaScript による音声処理</h3>

<p>音声Worklet を使うことで、JavaScript や <a href="/ja/docs/WebAssembly">WebAssembly</a> を使って自作の{{domxref("AudioNode")}}を定義できます。音声Worklet は {{domxref("Worklet")}} インターフェイスという軽量版 {{domxref("Worker")}} インターフェイスを実装しています。Chrome 66 以降で既定で有効です。</p>

<dl>
 <dt>{{domxref("AudioWorklet")}} {{experimental_inline}}</dt>
 <dd><code>AudioWorklet</code> インターフェイスは {{domxref("AudioContext")}} オブジェクトの {{domxref("BaseAudioContext.audioWorklet", "audioWorklet")}} を通して利用することができ、メインスレッドから実行されるオーディオワークレットにモジュールを追加することができます。</dd>
 <dt>{{domxref("AudioWorkletNode")}} {{experimental_inline}}</dt>
 <dd><code>AudioWorkletNode</code> インターフェイスは {{domxref("AudioNode")}} の一種で、音声グラフに組み込んだり、対応する <code>AudioWorkletProcessor</code> にメッセージを送信できます。</dd>
 <dt>{{domxref("AudioWorkletProcessor")}} {{experimental_inline}}</dt>
 <dd><code>AudioWorkletProcessor</code> インターフェイスは <code>AudioWorkletGlobalScope</code> で実行する音声処理コードで、音声の生成・処理・分析を直接行ったり、対応する <code>AudioWorkletNode</code> にメッセージを送信できます。</dd>
 <dt>{{domxref("AudioWorkletGlobalScope")}} {{experimental_inline}}</dt>
 <dd><code>AudioWorkletGlobalScope</code> インターフェイスは <code>WorkletGlobalScope</code> から派生するオブジェクトで、音声処理スクリプトが実行されるワーカーコンテキストを表現します。メインスレッド上ではなく、ワークレットスレッド上で JavaScript を使って直接オーディオデータの生成、処理、分析ができるように設計されています。</dd>
</dl>

<h4 id="Obsolete_script_processor_nodes" name="Obsolete_script_processor_nodes">Obsolete: script processor nodes</h4>

<p>音声Worklet が定義されるよりも昔、Web Audio API は JavaScript を使用する音声処理に <code>ScriptProcessorNode</code> を利用していました。しかしながら処理がメインスレッドで走るためにパフォーマンスが良くありませんでした。歴史的な理由から <code>ScriptProcessorNode</code> は維持されていますが非推奨であり、将来の規格から取り除かれる予定です。</p>

<dl>
 <dt>{{domxref("ScriptProcessorNode")}} {{deprecated_inline}}</dt>
 <dd><strong><code>ScriptProcessorNode</code></strong> を利用すると、JavaScript から音声データの生成、処理、分析を行えます。このノードは {{domxref("AudioNode")}} の一種で、入力と出力の二つのバッファとリンクしています。入力バッファに新しいデータがセットされる度に {{domxref("AudioProcessingEvent")}} インターフェイスを実装したイベントが生起します。イベントハンドラは出力バッファにデータをセットして処理を終了します。</dd>
 <dt>{{event("audioprocess")}} (event) {{deprecated_inline}}</dt>
 <dd><code>audioprocess</code> イベントは {{domxref("ScriptProcessorNode")}} の処理が可能になった際に発火します。</dd>
 <dt>{{domxref("AudioProcessingEvent")}} {{deprecated_inline}}</dt>
 <dd><code>AudioProcessingEvent</code> は {{domxref("ScriptProcessorNode")}} の入力バッファが処理可能になったことを表すイベントです。</dd>
</dl>

<h3 id="Offlinebackground_audio_processing" name="Offlinebackground_audio_processing">オフライン / バックグラウンドでの処理</h3>

<p>以下のようにすると、バックグラウンドでオーディオグラフを非常に高速に処理/レンダリングし、端末のスピーカーではなく {{domxref("AudioBuffer")}} にレンダリングすることができます。</p>

<dl>
 <dt>{{domxref("OfflineAudioContext")}}</dt>
 <dd><strong><code>OfflineAudioContext</code></strong> は {{domxref("AudioContext")}} の一種で、{{domxref("AudioNode")}} を組み合わせて、音声処理を行うグラフを表現しています。通常の <code>AudioContext </code> と異なり<code>、</code><code>OfflineAudioContext</code> は音声を出力せず、バッファ内で高速に処理を行います。</dd>
 <dt>{{event("complete")}} (event)</dt>
 <dd><code>complete</code> イベントは {{domxref("OfflineAudioContext")}} の処理が終了した時に発火します。</dd>
 <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt>
 <dd><code>OfflineAudioCompletionEvent</code> は {{domxref("OfflineAudioContext")}} の処理が終了したことを表します。{{event("complete")}} イベントは、これを実装しています。</dd>
</dl>

<h2 id="Obsolete_interfaces" name="Obsolete_interfaces">廃止されたインターフェイス</h2>

<p>以下のものは、Web Audio API の古い仕様には存在しましたが、現在は廃止され、別のものに置き換えられています。</p>

<dl>
 <dt>{{domxref("JavaScriptNode")}}</dt>
 <dd>JavaScript で音声を直接処理できます。廃止され、{{domxref("ScriptProcessorNode")}} に置き換えられています。</dd>
 <dt>{{domxref("WaveTableNode")}}</dt>
 <dd>定期的な波形変換を行います。廃止され {{domxref("PeriodicWave")}} に置き換えられています。</dd>
</dl>

<h2 id="Guides_and_tutorials" name="Guides_and_tutorials">ガイドとチュートリアル</h2>

<p>{{LandingPageListSubpages}}</p>

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

<p>GitHub の <a href="https://github.com/mdn/webaudio-examples/">webaudio-example</a> に多数の例が掲載されています。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Audio API')}}</td>
   <td>{{Spec2('Web Audio API')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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

<div>
<h3 id="AudioContext" name="AudioContext">AudioContext</h3>

<div>
<p>{{Compat("api.AudioContext", 0)}}</p>
</div>
</div>

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

<h3 id="Tutorialsguides" name="Tutorialsguides">チュートリアル/ガイド</h3>

<ul>
 <li><a href="/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Web Audio API の背後にある基本概念</a></li>
 <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API の使用</a></li>
 <li><a href="/ja/docs/Web/API/Web_Audio_API/Advanced_techniques">Advanced techniques: creating sound, sequencing, timing, scheduling</a></li>
 <li><a href="/ja/docs/Web/Media/Autoplay_guide">メディアおよびウェブオーディオ API の自動再生ガイド</a></li>
 <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_IIR_filters">Using IIR filters</a></li>
 <li><a href="/ja/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Web Audio API による視覚化</a></li>
 <li><a href="/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
 <li><a href="/ja/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li>
 <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
 <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
 <li><a href="/ja/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/ja/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
</ul>

<h3 id="Libraries" name="Libraries">ライブラリ</h3>

<ul>
 <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
 <li><a href="https://tonejs.github.io/">Tone.js</a>: a framework for creating interactive music in the browser.</li>
 <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://webaudio.github.io/web-audio-api/">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
 <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
 <li><a href="https://korilakkuma.github.io/XSound/">XSound</a>: Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... etc</li>
 <li><a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: HTML5 video language lab web application using the Web Audio API to record and combine video and audio from different sources into a single file (<a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">source on GitHub</a>)</li>
 <li><a href="https://ptsjs.org/">Pts.js</a>: Simplifies web audio visualization (<a href="https://ptsjs.org/guide/sound-0800">guide</a>)</li>
</ul>

<h3 id="Related_topics" name="Related_topics">関連トピック</h3>

<ul>
 <li><a href="/ja/docs/Web/Media">Web media technologies</a></li>
 <li><a href="/ja/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li>
</ul>