使用 Web Audio API 播放摩斯密码

前端开发 / /

在 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 操作流程是这样的：

图片来源：CSS-Tricks
  1. 创建音频上下文对象
  2. 创建音频源：音频文件、振荡器（生成声波）或音频流（摄像头/麦克风）
  3. 连接效果节点
  4. 输出音频

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

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

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

See the Pen Web Audio API: waveforms by Greg Hovanesyan (@gregh) on CodePen.

通过 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.5
gainNode.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);

播放摩斯密码

摩尔斯电码（英语：Morse code）是一种时通时断的信号代码，通过不同的排列顺序来表达不同的英文字母、數字和标点符号。是由美國人艾爾菲德·維爾(Alfred Lewis Vail)與萨缪尔·摩尔斯(Samuel Finley Breese Morse)在1836年发明。 —— 维基百科

播放摩斯密码所需要的 Web Audio API 上文都已介绍，现在我们只需要根据摩斯密码在不同的时间点设置音量为 1 或 0 就能实现电报效果了。

See the Pen Playing Morse Code with Web Audio API by Cople (@cople) on CodePen.

小结

本文只介绍了 Web Audio API 的冰山一角，更多的特性就等你自己发掘了～