使用 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)

通過 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);

播放摩斯密碼

摩爾斯電碼（英語：Morse code）是一種時通時斷的信號代碼，通過不同的排列順序來表達不同的英文字母、數字和標點符號。是由美國人艾爾菲德·維爾(Alfred Lewis Vail)與薩繆爾·摩爾斯(Samuel Finley Breese Morse)在1836年發明。 —— 維基百科

播放摩斯密碼所需要的 Web Audio API 上文都已介紹，現在我們只需要根據摩斯密碼在不同的時間點設置音量為 1 或 0 就能實現電報效果了。

小結

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