使用 Web Audio API 播放摩斯密码

文章目录

从 AudioContext 开始
通过 Oscillator（振荡器）生成声波
播放音频
调节音量
播放摩斯密码
小结

在 CSS-Tricks 上看到一篇介绍 Web Audio API 的文章，学以致用，为工具箱中的摩斯密码转换器加上了在线播放功能。

从 AudioContext 开始

Web Audio API 主要通过 AudioContext 来处理音频，就好像 RenderingContext 之于 Canvas API。

// Safari 需要 `webkit` 前缀var AudioContext = window.AudioContext || window.webkitAudioContext;var ctx = new AudioContext();

通常一个典型的 Web Audio API 操作流程是这样的：

创建音频上下文对象
创建音频源：音频文件、振荡器（生成声波）或音频流（摄像头/麦克风）
连接效果节点
输出音频

通过 Oscillator（振荡器）生成声波

Oscillator 可以发出指定波形和频率的声波。

让我们来听下四种常见的波形：
方波 (square)、三角波 (triangle)、正弦波 (sine) 和锯齿波 (sawtooth)

通过 Oscillator，我们无需音频文件，就能生成和电报一样的声音：

var oscillator = ctx.createOscillator();// 设置波形oscillator.type = "sine";// 设置频率oscillator.frequency.value = 600;

播放音频

为了把音频输出到扬声器，你需要将各个节点连接起来。
接着上面的代码，将 Oscillator 节点连接到 AudioContext.destination（即输出设备），调用 start() 方法开始播放。

var AudioContext = window.AudioContext || window.webkitAudioContext;var ctx = new AudioContext();var oscillator = ctx.createOscillator();oscillator.type = "sine";oscillator.frequency.value = 600;oscillator.connect(ctx.destination);oscillator.start();

调节音量

要更改音量，你需要连接一个 GainNode（音量控制器）节点。
新的节点路由变成了：oscillator -> gainNode -> destination

var gainNode = ctx.createGain();oscillator.connect(gainNode);gainNode.connect(ctx.destination);// 从第 0 秒开始设置音量为 0.5gainNode.gain.setValueAtTime(0.5, 0);

gainNode.gain返回的是一个 AudioParam 对象，它有一个 setValueAtTime(value, startTime) 方法来在指定时间设置指定值。

// AudioContext.currentTime 返回的是当前时间gainNode.gain.setValueAtTime(0.5, ctx.currentTime + 0);// 1 秒后恢复音量gainNode.gain.setValueAtTime(1.0, ctx.currentTime + 1);