前言
在前七天裡，我們把「賽博紓壓診所」的介面、日夜模式、過場動畫與 SPA 畫面切換架構全部搞定，第一階段的基礎算非常扎實了。

不過，你有沒有發現？當我們點擊按鈕切換畫面時，畫面雖然很流暢，但整個網頁安靜得像圖書館一樣，總覺得少了一點點「真實的回饋感」。就像手機 App 按下去都會有微微的震動或清脆的音效一樣，互動網頁如果能加入一點聲音，質感會瞬間暴增！

如果要加音效，傳統做法通常是要去找 .mp3 或 .wav 音檔來引入。但這不僅要處理檔案路徑、擔心瀏覽器的自動播放限制（Autoplay Policy），還會讓專案變得肥大。因此，今天我們要來挑戰一個超酷的做法：完全不靠外部音檔，直接用瀏覽器內建的 Web Audio API 用程式碼「合成」出輕柔的點擊音效！

核心觀念：什麼是 Web Audio API？
簡單來說，Web Audio API 是現代瀏覽器內建的一套強大音訊處理引擎。它就像是在網頁裡面塞了一座小型合成器。

我們不需要上網下載音效檔案，只需要透過 JavaScript 建立一個音訊環境（AudioContext），然後用程式碼告訴瀏覽器：

1. 發出一個頻率： 比如設定一個乾淨的正弦波（Sine wave）。
2. 控制音量與時間： 讓聲音在極短的幾毫秒內由大變小（Envelope 衰減），製造出一個像水滴或輕輕敲擊玻璃般、完全不刺耳的「啵」一聲。

這樣做最大的好處是零載入延遲、不需要額外檔案，而且程式碼意外地非常簡短！

動手寫 Code：用 Web Audio API 打造輕柔點擊音效
今天我們把焦點放在這個輕量音效函式上。我們建立一個名為 playSubtleClick() 的函式，並把它綁定到按鈕的點擊事件中。你可以參考以下這段獨立的示範程式碼：

<div class="card">
    <h2>🎵 點擊按鈕聽聽看合成音效</h2>
    <p>不需要任何外部音檔，純靠瀏覽器振盪器產生！</p>
    <!-- 每次點擊時，同時觸發音效與其他互動 -->
    <button class="btn" onclick="playSubtleClick()">點我發出療癒音效</button>
</div>

<script>
    let audioCtx = null;

    // 初始化 AudioContext（必須在使用者產生互動（如點擊）後才能啟動）
    function initAudio() {
        if (!audioCtx) {
            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
            audioCtx.resume();
        }
    }

    // 動態合成輕柔觸感音效
    function playSubtleClick() {
        initAudio(); // 確保音訊環境已就緒

        // 1. 建立振盪器（產生頻率波形）
        const osc = audioCtx.createOscillator();
        // 2. 建立音量控制器（控制聲音大小與衰減）
        const gain = audioCtx.createGain();

        // 設定為正弦波，聽起來柔和不刺耳
        osc.type = 'sine';
        
        // 設定起始頻率（從高音快速下降，模擬清脆的敲擊感）
        osc.frequency.setValueAtTime(600, audioCtx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(200, audioCtx.currentTime + 0.08);

        // 設定音量：從 0.15 開始，在 0.08 秒內迅速歸零（避免爆音）
        gain.gain.setValueAtTime(0.15, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.08);

        // 將振盪器連接到音量器，再連接到喇叭輸出
        osc.connect(gain);
        gain.connect(audioCtx.destination);

        // 開始發聲並在 0.08 秒後自動停止
        osc.start();
        osc.stop(audioCtx.currentTime + 0.08);
    }
</script>

開發心得與設計巧思
在思考這個環節時，我一直在琢磨：既然這是一個「紓壓診所」，那聲音絕對不能太吵、太生硬，否則反而會造成精神干擾。

透過 Web Audio API 的 sine 波形搭配頻率的快速下降（Exponential Ramp），我們可以手刻出一個非常短暫、像是按在高級電子儀器或清脆木琴上的療癒小音效。這種細節雖然很微小，但當使用者在操作介面時，聽覺與視覺的回饋同步發生，整體的「沈浸感」就會立刻上升一個檔次。不用依賴笨重的檔案，完全靠前端邏輯創造驚喜，這就是寫純前端最讓人著迷的地方！

今日結語與明日預告
今天我們透過 Web Audio API 成功讓按鈕開口說話，用 JavaScript 動態合成出輕柔的觸感音效。

明天 Day 09：情緒點擊狂熱：實作「惡言消滅器」浮動元素與計分互動，我們要來做一個非常有梗的小遊戲，讓使用者點擊畫面上飄過的負面字眼來發洩壓力，順便把互動玩得更生動！我們明天見！