blob: 10986c407e193972af5ba72f6ae22ec2683f7c13 (
plain)
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
title: AudioContext.createWaveShaper()
slug: Web/API/BaseAudioContext/createWaveShaper
translation_of: Web/API/BaseAudioContext/createWaveShaper
original_slug: Web/API/AudioContext/createWaveShaper
---
<p>{{ APIRef("Web Audio API") }}</p>
<p>{{ domxref("AudioContext") }} 接口的createWaveShaper()方法创建了 表示非线性失真的{{ domxref("WaveShaperNode") }}。该节点通常被用来给音频添加失真效果</p>
<h2 id="语法">语法</h2>
<pre class="brush: js">var audioCtx = new AudioContext();
var distortion = audioCtx.createWaveShaper();</pre>
<h3 id="Description" name="Description">返回</h3>
<p>A {{domxref("WaveShaperNode")}}.</p>
<h2 id="Example" name="Example">例子</h2>
<p>The following example shows basic usage of an AudioContext to create a wave shaper node. For applied examples/information, check out our <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a><a href="http://mdn.github.io/voice-change-o-matic/"> demo</a> (<a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js">see app.js</a> for relevant code).</p>
<p>下面的例子展示了AudioContext创建一个波形整形器节点的基本用法。有关应用示例/信息，请查看我们的<a href="http://mdn.github.io/voice-change-o-matic/">oice-change-O-matic</a><a href="http://mdn.github.io/voice-change-o-matic/"> demo</a>演示（有关代码，请参阅<a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js">app.js</a>）。</p>
<div class="note">
<p><strong>注</strong>：实现失真曲线并不是简单的事情，你可能需要到处找资料来找到这样的算法。我们在<a href="http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion">Stack Overflow</a>上找到了以下的失真曲线代码</p>
</div>
<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var distortion = audioCtx.createWaveShaper();
...
function makeDistortionCurve(amount) {
var k = typeof amount === 'number' ? amount : 50,
n_samples = 44100,
curve = new Float32Array(n_samples),
deg = Math.PI / 180,
i = 0,
x;
for ( ; i < n_samples; ++i ) {
x = i * 2 / n_samples - 1;
curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
}
return curve;
};
...
distortion.curve = makeDistortionCurve(400);
distortion.oversample = '4x';</pre>
<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', '#widl-AudioContext-createWaveShaper-WaveShaperNode', 'createWaveShaper()')}}</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>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(25.0)}} </td>
<td>{{CompatNo}}</td>
<td>15.0{{property_prefix("webkit")}}<br>
22 (unprefixed)</td>
<td>6.0{{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>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>26.0</td>
<td>1.2</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>33.0</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
|
