files/zh-tw/web/api/web_audio_api/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

---
title: Web Audio API
slug: Web/API/Web_Audio_API
translation_of: Web/API/Web_Audio_API
---
<p>{{SeeCompatTable}}</p>
<p><img alt="Show the ability of AudioNodes to connect via their inputs and outputs and the channels inside these inputs/outputs." src="https://mdn.mozillademos.org/files/5183/WebAudioGenerics.png" style="width: 338px; height: 349px; float: left;"><strong>Web Audio API</strong> 可於 Web App 或網頁上操作並播放音訊檔案。</p>
<p>Web Audio API 是根據模組化路由 (Modular routing) 的概念所設計。所謂的模組化路由，即是以<strong>「音訊節點</strong><strong> (Audio nodes)</strong><strong>」</strong>執行基本的音訊作業<strong>，</strong>節點又互相連接而構成「音訊路由圖 (Audio routing graphs)」。在同一環境 (Audio context) 內，又可支援數個音源與多樣的聲道配置。此模組化設計可提供更高的靈活度，並能建立複雜的音訊函式與動態效果。</p>
<p>音訊節點均透過其輸出與輸入而相互連結。各個輸入/輸出均具備數個<strong>聲道</strong><strong> (Channel)</strong><strong>，以構成特定的音訊配置。但目前已可支援單聲道、立體聲、四聲道、</strong>5.1 聲道等配置，並支援其他的離散配置。</p>
<p>音訊有多種來源。可能由特定的音訊節點 (如震盪器、自訂函式，甚或簡易的資料陣列) 直接在 JavaScript 中產生。音源除了可連至 HTML 媒體元素 (如 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="The HTML &lt;video> element is used to embed video content in an HTML or XHTML document."><code>&lt;video&gt;</code></a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio" title="The HTML &lt;audio> element is used to represents sound content in documents. Added as part of HTML5, it may contain several audio sources, represented using the src attribute or the &lt;source> element; the browser will choose the most suitable one. Fallback c"><code>&lt;audio&gt;</code></a>)，亦可能來自於 <a href="https://developer.mozilla.org/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> 的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream" title="The MediaStream interface represents a stream of media content. A stream consists of several tracks, like video or audio tracks."><code>MediaStream</code></a> (本端裝置的相機或遠方電腦)。</p>
<p>特定音訊事件發生的時間點，均達到極高的精確度與極低的潛時，因此亦可用以詳細定義鼓類機器或音序器 (Sequencer) 所需的事件。</p>
<p>Web Audio API 亦可控制音訊的空間定位 (Spatialized) 作業：透過 source-listener 模型架構的系統，進而控制所要使用的左右相位 (Panning<em>，</em>聲音放置於左右喇叭之間形成的立體音場中，以產生出空間感) 模<em>型</em>，進而自動處理因距離遠近所產生的衰減，或是由於音源/聽者移動所發生的都卜勒移頻 (Doppler shift)。</p>
<h2 id="參考">參考</h2>
<div class="index">
 <ul>
  <li>{{domxref("AnalyserNode")}}</li>
  <li>{{domxref("AudioBuffer")}}</li>
  <li>{{domxref("AudioBufferSourceNode")}}</li>
  <li>{{domxref("AudioContext")}}</li>
  <li>{{domxref("AudioDestinationNode")}}</li>
  <li>{{domxref("AudioListener")}}</li>
  <li>{{domxref("AudioNode")}}</li>
  <li>{{domxref("AudioParam")}}</li>
  <li>{{event("audioprocess")}} (event)</li>
  <li>{{domxref("AudioProcessingEvent")}}</li>
  <li>{{domxref("BiquadFilterNode")}}</li>
  <li>{{domxref("ChannelMergerNode")}}</li>
  <li>{{domxref("ChannelSplitterNode")}}</li>
  <li>{{event("complete")}} (event)</li>
  <li>{{domxref("ConvolverNode")}}</li>
  <li>{{domxref("DelayNode")}}</li>
  <li>{{domxref("DynamicsCompressorNode")}}</li>
  <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
  <li>{{domxref("GainNode")}}</li>
  <li>{{domxref("MediaElementAudioSourceNode")}}</li>
  <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
  <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
  <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
  <li>{{domxref("OfflineAudioContext")}}</li>
  <li>{{domxref("OscillatorNode")}}</li>
  <li>{{domxref("PannerNode")}}</li>
  <li>{{domxref("ScriptProcessorNode")}}</li>
  <li>{{domxref("WaveShaperNode")}}</li>
  <li> </li>
 </ul>
</div>
<h2 id="線上教學">線上教學</h2>
<ul>
 <li>使用 Web Audio API</li>
 <li><a href="http://www.html5rocks.com/tutorials/webaudio/intro/" title="http://www.html5rocks.com/tutorials/webaudio/intro/">Getting Started with the Web Audio API</a> (僅說明 WebKit-only 的非標準建置)</li>
 <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">混合定位音訊 (Positional Audio) 與 WebGL</a></li>
 <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">以 Web Audio API 開發遊戲音訊</a></li>
 <li><a href="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">將 webkitAudioContext 程式碼移植為標準的 AudioContext</a></li>
</ul>
<h2 id="規格">規格</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Audio API')}}</td>
   <td>{{Spec2('Web Audio API')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<div>
 {{CompatibilityTable}}</div>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>14 {{property_prefix("webkit")}}</td>
    <td>23</td>
    <td>{{CompatNo}}</td>
    <td>15 {{property_prefix("webkit")}}</td>
    <td>6 {{property_prefix("webkit")}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Chrome</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatNo}}</td>
    <td>28 {{property_prefix("webkit")}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>6 {{property_prefix("webkit")}}</td>
   </tr>
  </tbody>
 </table>
</div>
<p> </p>