在 CSS-Tricks 上看到一篇介紹 Web Audio API 的文章，學(xué)以致用，為工具箱中的摩斯密碼轉(zhuǎn)換器加上了在線播放功能。

從 AudioContext 開始

Web Audio API 主要通過 AudioContext 來處理音頻，就好像 RenderingContext 之于 Canvas API。

// Safari 需要 `webkit` 前綴

varAudioContext= window.AudioContext|| window.webkitAudioContext;

varctx = newAudioContext();

通常一個(gè)典型的 Web Audio API 操作流程是這樣的：

創(chuàng)建音頻上下文對象

創(chuàng)建音頻源：音頻文件、振蕩器（生成聲波）或音頻流（攝像頭/麥克風(fēng)）

連接效果節(jié)點(diǎn)

輸出音頻

通過 Oscillator（振蕩器）生成聲波

Oscillator 可以發(fā)出指定波形和頻率的聲波。

讓我們來聽下四種常見的波形：方波 (square)、三角波 (triangle)、正弦波 (sine) 和鋸齒波 (sawtooth)

展開全文

通過 Oscillator，我們無需音頻文件，就能生成和電報(bào)一樣的聲音：

varoscillator = ctx.createOscillator();

// 設(shè)置波形

oscillator.type = "sine";

// 設(shè)置頻率

oscillator.frequency.value = 600;

為了把音頻輸出到揚(yáng)聲器，你需要將各個(gè)節(jié)點(diǎn)連接起來。接著上面的代碼，將 Oscillator 節(jié)點(diǎn)連接到 AudioContext.destination（即輸出設(shè)備），調(diào)用 start() 方法開始播放。

varAudioContext= window.AudioContext|| window.webkitAudioContext;

varctx = newAudioContext();

varoscillator = ctx.createOscillator();

oscillator.type = "sine";

oscillator.frequency.value = 600;

oscillator.connect(ctx.destination);

oscillator.start();

要更改音量，你需要連接一個(gè) GainNode（音量控制器）節(jié)點(diǎn)。新的節(jié)點(diǎn)路由變成了：oscillator - gainNode - destination

vargainNode = ctx.createGain();

oscillator.connect(gainNode);

gainNode.connect(ctx.destination);

// 從第 0 秒開始設(shè)置音量為 0.5

gainNode.gain.setValueAtTime(0.5, 0);

gainNode.gain返回的是一個(gè) AudioParam 對象，它有一個(gè) setValueAtTime(value, startTime) 方法來在指定時(shí)間設(shè)置指定值。

// AudioContext.currentTime 返回的是當(dāng)前時(shí)間

gainNode.gain.setValueAtTime(0.5, ctx.currentTime + 0);

// 1 秒后恢復(fù)音量

gainNode.gain.setValueAtTime(1.0, ctx.currentTime + 1);

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

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

播放摩斯密碼所需要的 Web Audio API 上文都已介紹，現(xiàn)在我們只需要根據(jù)摩斯密碼在不同的時(shí)間點(diǎn)設(shè)置音量為 1 或 0 就能實(shí)現(xiàn)電報(bào)效果了。

小結(jié)

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

HTML5 音頻 API Web Audio