寫程式也能作曲！用 Tone.js 打造你的專屬網頁音樂

Tone.js 的定義與本質

Tone.js 是建立在 Web Audio API 基礎上的高級 JavaScript 框架，專門用於在瀏覽器環境中創建互動式音樂和動態音效。與普通的庫不同，Tone.js 作為一個框架不僅提供功能，還規定了代碼的結構與架構，為音頻編程提供了清晰的方向。

Tone.js 的核心設計理念是讓其架構對音樂家和音頻程序員都感到熟悉，特別是對於創建基於網絡的音頻應用程序。它抽象化了 Web Audio API 的複雜性，提供了更直觀的界面來創建和操作聲音，使開發者能夠以更音樂化的方式進行編程。

核心設計原則

Tone.js 的開發遵循了幾個關鍵原則，形成了其獨特性和實用性的基礎。首先，它強調音樂性和模塊性。音樂性允許開發者使用音樂術語進行編程，縮小了音樂創作和技術實現之間的鴻溝。模塊性則提供了數十個可靈活連接的信號處理和合成構建模塊，提高了代碼的可重用性和創新性。

同步和可擴展性是 Tone.js 的另外兩個重要特性。同步功能使不同的聲音和事件能夠共享同一時間線，實現精確的音樂表現。可擴展性設計則考慮到了從簡單實驗到複雜應用的各種需求，提供了低級 API 和高級抽象，適應不同規模和複雜度的項目。

最後，Tone.js 在性能優化方面也做出了巨大努力。儘管提供了高級抽象，但它在底層仍然緊密集成了 Web Audio API，確保了高效的音頻處理。這種設計使得開發者能夠創建複雜的音頻應用，同時保持良好的性能表現，即使在資源受限的設備上也能流暢運行。這些原則共同構成了 Tone.js 的核心設計哲學，使其成為一個強大而靈活的 Web 音頻開發工具。

使用 Tone.js 的優勢

Person Using MacBook Pro (Glenn Carstens-Peters)

Tone.js 作為網絡音頻開發的首選工具，提供了多方面的優勢。首先，它極大地簡化了 Web Audio API 的使用過程，使初學者能夠快速入門音頻編程，同時為有經驗的開發者提供了豐富的高級功能。Tone.js 的高級抽象使複雜的音頻處理變得直觀可管理，讓開發者能夠更專注於創意而非技術細節。

其次，Tone.js 的強大功能和靈活性體現在其豐富的聲音合成和操作功能上。模塊化設計允許創建複雜的音頻路由和處理鏈，實現獨特的聲音設計。事件調度系統利用 JavaScript 回調提供了極大的靈活性，支持各種類型的事件調度。此外，Tone.js 的設計考慮了與其他庫和模塊的互操作性，使其成為混合音頻解決方案的理想選擇。

最後，Tone.js 擁有活躍的開發者社區和良好的文檔支持，這對長期項目的成功至關重要。作為一個不斷發展的開源項目，Tone.js 保持著現代性和相關性。它的免費使用特性使其成為音樂家和開發者設置音樂工作室和樂器的經濟選擇。這些因素共同確保了 Tone.js 在網絡音頻開發領域的領先地位，為創新聲音體驗開闢了新的可能性。

安裝方法

Tone.js 可以通過多種方式安裝，以適應不同的開發環境和項目需求。無論你是使用現代的模塊打包工具，還是希望通過傳統的腳本標籤引入，Tone.js 都提供了相應的安裝選項。以下是幾種常見的安裝方法：

1. 使用 npm：

npm install tone

2. 使用 yarn：

yarn add tone

3. 使用 CDN：

<script src="https://unpkg.com/tone"></script>

使用方法

Tone.js 提供了多種方式來創建音頻應用，以下是一個簡單的示例，展示了如何使用合成器和采樣器來創建旋律。

import { Tone } from "tone";
const now = Tone.now();
const synth = new Tone.Synth().toDestination();
synth.triggerAttackRelease("C4", "8n", now);
synth.triggerAttackRelease("D4", "8n", now + 0.5);
synth.triggerAttackRelease("E4", "8n", now + 1);
synth.triggerAttackRelease("F4", "8n", now + 1.5);
synth.triggerAttackRelease("G4", "8n", now + 2);

const sampler = new Tone.Sampler({
  urls: {
    C4: "C4.mp3",
    "D#4": "Ds4.mp3",
    "F#4": "Fs4.mp3",
    A4: "A4.mp3",
  },
  release: 1,
  baseUrl: "https://tonejs.github.io/audio/salamander/",
}).toDestination();

Tone.loaded().then(() => {
  sampler.triggerAttackRelease(["Eb4", "G4", "Bb4"], 4);
});

這個示例展示了如何使用 Tone.js 的合成器和采樣器來創建旋律。首先，我們創建了一個合成器，然後使用 triggerAttackRelease 方法來創建旋律。接著，我們創建了一個采樣器，然後使用 triggerAttackRelease 方法來創建采樣旋律。

Tone.js 的主要功能

Tone.js 提供了豐富的功能，使開發者能夠創建從簡單到複雜的音頻應用：

TypeScript 支持

TypeScript (Microsoft)

Tone.js 提供全面的 TypeScript 支持，為開發者提供了強大的類型定義系統。這不僅增強了代碼的可維護性，還顯著減少了潛在的錯誤，確保了開發過程的穩定性和效率。通過利用 TypeScript 的靜態類型檢查，開發者可以在編碼階段就捕獲許多常見錯誤，大大提高了開發效率和代碼質量。

Tone.js 的類型定義涵蓋了音樂理論中的核心概念，如音符、八度和 MIDI 值。例如，Note 類型定義了一個精確的音符表示方法，包括音名、變音記號和八度：

// tone/build/esm/core/type/NoteUnits.d.ts
type Letter = "C" | "D" | "E" | "F" | "G" | "A" | "B";
type Accidental = "bb" | "b" | "" | "#" | "x";
type Octave = -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
/**
 * A note in Scientific pitch notation.
 * The pitch class + octave number
 * e.g. "C4", "D#3", "G-1"
 * @category Unit
 */
export type Note = `${Letter}${Accidental}${Octave}`;
type IntegerRange<N extends number, A extends any[] = []> = A["length"] extends N ? A[number] : IntegerRange<N, [...A, A["length"]]>;
/**
 * A number representing a midi note. Integers between 0-127
 * @category Unit
 */
export type MidiNote = IntegerRange<128>;
export {};

MidiNote 類型則限定了 MIDI 音符的有效範圍，確保了音頻數據的準確性。

此外，Tone.js 的 TypeScript 支持還包括了複雜的類型推導和泛型使用，如 IntegerRange 類型的定義。這種高級類型系統使得 Tone.js 能夠在保持靈活性的同時，提供嚴格的類型檢查，為音頻開發提供了堅實的基礎。通過這種方式，Tone.js 不僅簡化了 Web 音頻開發，還提高了代碼的可靠性和可讀性，使得開發者能夠更專注於創意和音樂表達，而不是陷入技術細節的困擾。

合成器與效果器

Tone.js 包含多種內置合成器，包括 FM（頻率調制）合成器和 Karplus-Strong 撥弦建模合成器。此外，它還提供了眾多音頻效果，如 Tone.PingPongDelay、Tone.Freeverb 和 Tone.BitCrusher。這些工具可以生成複雜的聲音效果，豐富音頻內容。

// 基本合成器使用
const synth = new Tone.FMSynth().toDestination();
synth.triggerAttackRelease("C4", "4n");

時間表示與音樂節奏

Analog timepiece (Djim Loic)

Tone.js 提供了一套強大的時間表示系統 Tone.Time，允許使用音樂節奏相關的語法來描述時間長度。例如，"4n" 表示一個四分音符的持續時間，在 120 BPM（每分鐘 120 拍）的情況下，等同於 0.5 秒。這種表示法受到 Max/MSP 的節拍記譜與 Ableton Live 傳輸格式的啟發，對音樂人而言相當直覺。

// 基本時間表示
const time = new Tone.Time("4n");

Tone.js 支援多種時間單位，包括：

• "8n"（八分音符）
• "16n"（十六分音符）
• "2m"（兩小節）
• "4:2"（第 4 小節第 2 拍）
• "0:3:2"（第 0 小節第 3 拍第 2 個十六分音符）

此外，你也可以直接使用 JavaScript 數字來表示秒數，例如 0.5 表示 0.5 秒：

// 使用數字表示時間（秒）
const time = new Tone.Time(0.5);

這套系統讓時間排程不再只限於硬編碼秒數，而能以節奏為單位，使音樂邏輯更一致、可讀性更高，也更適合同步多個聲音事件。

JSON 預設與狀態管理

Tone.js 中的樂器和效果狀態可以通過 JSON（JavaScript 對象表示法）描述在構造函數和 set 方法中設置。這種格式使創建和分享預設變得簡單，並可能幫助解耦聲音生成器的構建過程和使用這些聲音的作曲過程。

// 基本 JSON 預設
const synth = new Tone.FMSynth().toDestination();
synth.set({
  frequency: "C4",
  detune: 0,
  envelope: {
    attack: 0.01,
    decay: 0.1,
    sustain: 0.5,
    release: 1,
  },
  oscillator: {
    type: "sine",
  },
});
synth.triggerAttackRelease("C4", "4n");

這種 JSON 預設方法不僅適用於單個合成器，還可以應用於更複雜的音頻設置。例如，你可以為整個混音器通道創建預設：

const channel = new Tone.Channel().toDestination();
channel.set({
  volume: -6,
  pan: 0.5,
  mute: false,
  solo: false,
  effects: [
    {
      type: "reverb",
      wet: 0.5,
      decay: 2,
    },
    {
      type: "delay",
      delayTime: "8n",
      feedback: 0.4,
    },
  ],
});

const synth = new Tone.Synth().connect(channel);
synth.triggerAttackRelease("C4", "4n");

這種方法的優勢在於：

1. 可重用性：可以輕鬆地在不同的項目中重複使用相同的音頻設置。
2. 可讀性：JSON 格式使得音頻設置更易於理解和修改。
3. 可序列化：可以將這些設置保存到文件中或通過網絡傳輸。
4. 動態調整：可以根據用戶輸入或其他程序邏輯動態修改這些設置。

通過這種方式，Tone.js 為音頻編程提供了極大的靈活性和可擴展性，使得創建複雜的音頻應用變得更加直觀和高效。

結論

A person is writing on a laptop on a desk photo (Behnam Norouzi)

Tone.js 作為一個功能強大且靈活的 Web 音頻框架，為在瀏覽器中創建互動式音樂和動態音效提供了一套全面的工具和功能。其音樂性、模塊性和同步能力使其成為音樂家和開發者的理想選擇。通過簡化 Web Audio API 的複雜性，Tone.js 使音頻編程變得更加接近音樂創作的過程，為網絡上的創新聲音體驗開闢了新的可能性。

對於希望探索網絡音頻潛力的開發者來說，Tone.js 提供了一個平衡易用性和功能強大性的優秀平台，使其成為網絡音頻開發領域的領先工具之一。無論是創建互動式音樂應用、遊戲音效還是網絡音頻實驗，Tone.js 都能提供所需的工具和框架，讓創意成為現實。