使用网络音频 API 的第一步

Web Audio API是一个抽象层,旨在简化网络的音频编程。

在这个简短的介绍中,您将了解Web Audio API的AudioContext,以及AudioContext实例创建简单的振动器的能力,可以用来将您的浏览器转化为回归合成器!本教程的代码片段已在Chrome中测试,但您可能可以使用您喜爱的浏览器的开发工具的控制台。

Prep 工作

如前所述,Web Audio API的支持不是普遍的,所以最好在用户的浏览器中验证API是否可用:

 1let audioContext;
 2
 3try {
 4  audioContext =
 5    new (window.AudioContext || window.webkitAudioContext)();
 6} catch (error) {
 7  window.alert(
 8    `Sorry, but your browser doesn't support the Web Audio API!`
 9  );
10}
11
12if (audioContext !== undefined) {
13  /* Our code goes here */
14}

经过这个简单的检查,我们可以安全地使用Web Audio API的功能。

关于音频背景

想象audioContext - 我们的AudioContext例子 - 可能有助于作为一个类型的DJ:它协调了一系列音频源,并确保这些源在正确的时间通过用户的扬声器播放,并使用正确的声音。

*AudioContext是一个主时间维护器。所有信号都应该与audioContext.currentTime相对安排. *AudioContext的实例可以从头开始创建音频源

简单的 oscillator

要查看它可以自行产生什么样的声音,让我们使用audioContext创建一个OscillatorNode:

1const oscillator = audioContext.createOscillator();

这就是我们需要用浏览器制作声音的全部――一个AudioContext和一个OscillatorNode。但首先,我们需要将 oscillator``线到我们的audioContext:

1oscillator.connect(audioContext.destination);

Web Audio API 试图模仿一个模拟信号链. 我们将输入信号( oscillator)导入一个数字电源增强器(audioContext),然后将信号传递给扬声器(目的地)。

让我们做一些噪音:

1oscillator.start();

恭喜,你正在使用Web Audio API创作音乐!当然,没有人想永远听到相同的音调。

1oscillator.stop();

<$>[警告] 停止 AudioNode 后,无法重新启动! 需要创建一个新的 AudioNode 才能恢复播放。

开始和停止方法都接受一个单一的数字类型的参数,参数值用于计划开始/停止事件:

1/* Emit a signal 10 seconds from now */
2oscillator.start(audioContext.currentTime + 10);
3
4/* Cancel the signal 10 seconds after that */
5oscillator.stop(audioContext.currentTime + 20);

让我们通过操纵我们的 oscillator来完成不同的声音。

使用 AudioParams 操纵声音

 1console.log(oscillator);
 2/*
 3  {
 4    channelCount: number,
 5    context: AudioContext,
 6    detune: AudioParam,
 7    type: 'sine' | 'sawtooth' | 'triangle' | 'square'
 8    frequency: AudioParam,
 9    numberOfInputs: number,
10    numberOfOutputs: number,
11    onended: function
12    ...
13  }
14*/

对于我们的目的最重要的属性是‘oscillator.frequency’:

1console.log(oscillator.frequency);
2/*
3  {
4    defaultValue: number,
5    maxValue: number,
6    minValue: number,
7    value: number // Probably 440 (A4)
8  }
9*/

我们的 oscillator的频率值实现了AudioParam界面(https://developer.mozilla.org/en-US/docs/Web/API/AudioParam)。像oscillator这样的AudioNode的声音可以通过其AudioParam属性进行操纵。

1/* Don't do this */
2oscillator.frequency.value = 500;

如果我们想让我们的振动器发出一个Bb而不是一个A,我们应该这样做:

1/* The frequency (in Hz) of Bb4 is 466.16 */
2oscillator
3  .frequency
4  .setValueAtTime(466.16, audioContext.currentTime);

或

1/* Slowly transition to Bb4 over the span of 10 seconds */
2oscillator
3  .frequency
4  .exponentialRampToValueAtTime(
5      466.16,
6      audioContext.currentTime + 10
7  );

奖金:调整周期波形

OscillatorNode界面的类型属性代表了类型属性,默认情况下,类型是sine。大多数浏览器支持至少三种其他选项:sawtooth,triangle和square。因此,更改我们的oscillator的色调简单如下:

1oscillator.type = 'triangle';

结论

通过Web Audio API,在浏览器中生成和操纵音频比以往任何时候都更容易。

↓ 挑战:使用 Web 音频 API 来编程 Funkytown 的 riff!