音效板

仿 Drum Pad Machine 的網頁音效板，電腦、平板、手機都能用（自動調整按鈕大小與排列）。

按鈕

鍵	按鈕	音檔	來源
1	規則說明	sounds/01-rules.mp3	https://youtu.be/amilDJFuTYg
2	第一關（Coconut Mall）	sounds/02-round1.mp3	https://youtu.be/cscuCIzItZQ
3	公布	sounds/03-reveal.mp3	https://youtu.be/btgF8tFcq6c
4	第二關（Uptown Funk）	sounds/04-round2.mp3	https://youtu.be/OPf0YbXqDm0
5	加賽（The Final Countdown）	sounds/05-tiebreak.mp3	https://youtu.be/9jK-NcRmVcw
6	頒獎	sounds/06-award.mp3	https://youtu.be/WE13VQusy3I
7	工作人員名單（Get Outside! – Jason Farnham）	sounds/07-credits.mp3	https://youtu.be/-V5XG9F6Y5w
8、9	自訂 1、自訂 2	在網頁上自己選	—

要修改內建按鈕，編輯 js/config.js（也可以在裡面加更多內建音效組）。

1. 下載音檔

sounds/ 已經附上全部 7 個音檔，不用再下載。下面的腳本只在想重新下載或換音檔時使用（已存在的檔案會略過）。

sounds/ 裡有音檔的按鈕會直接播放本機檔案（最快、最穩定，不需要網路）。 沒有音檔的按鈕會改用 YouTube 播放（按鈕右上角顯示「YT」，需要網路）。

• Windows：先在「命令提示字元」執行一次 winget install yt-dlp.yt-dlp Gyan.FFmpeg， 然後雙擊 scripts\download.bat
• macOS：先執行 brew install yt-dlp ffmpeg，再執行 ./scripts/download.sh
• Linux：先安裝 yt-dlp 和 ffmpeg，再執行 ./scripts/download.sh

下載好的 mp3 會放在 sounds/；已經下載過的會自動略過。

2. 開啟網頁

建議用網址開啟（直接雙擊 index.html 的話，YouTube 備援播放不能用）：

• 在自己電腦上：在這個資料夾執行 python3 -m http.server 8000， 再用瀏覽器開 http://localhost:8000 同一個 Wi-Fi 的手機 / 平板可以開 http://<電腦的 IP>:8000
• 放到網路上（Vercel）：
  1. 到 https://vercel.com/new ，選「Import」這個 GitHub repo（sing_broad）
  2. Framework Preset 選 Other，Build Command、Output Directory 都留空
  3. 按 Deploy，完成後會得到一個 https://xxx.vercel.app 網址，手機、平板、電腦都能開
  4. 之後只要推送到 GitHub，Vercel 會自動重新部署 （Vercel 預設只把「Production Branch」部署成正式網址，其他分支是預覽網址； 可在 Project Settings → Git 設定 Production Branch）

手機 / 平板用 Safari 或 Chrome 的「加入主畫面」，就能像 App 一樣全螢幕開啟。

使用方式

• 點按鈕：播放；播放中再點一次：停止
• 單首 / 混音：單首模式下按新的按鈕，正在播的會自動淡出；混音模式可同時播多個
• 淡出：所有聲音在 2 秒內淡出
• 停止：立即停止全部
• 編輯：點按鈕可改名稱、顏色、起始秒數（跳過影片開頭）、音量、循環， 或從手機 / 電腦選擇其他音檔。設定存在這台裝置的瀏覽器裡。 電腦上也可以直接把音檔拖到按鈕上，或在按鈕上按右鍵開啟編輯。
• 鍵盤：1–9 播放對應按鈕、空白鍵 全部停止、F 淡出、← → 切換音效組

音效組

最上面一排是音效組分頁，點一下就切換整個面板。

• ＋：建立新的音效組並取名，可以選「複製目前的音效組」或「空白」
• 編輯（在自訂音效組裡）：
  • 點按鈕 → 從「音效庫」挑內建的音樂（第一關、加賽…），或選擇自己的音檔，也可以改名、改顏色、刪除按鈕
  • 點「＋ 新增按鈕」加按鈕（最多 30 個）
• 管理：重新命名、刪除、匯出、匯入音效組
• 切換音效組時，正在播的音樂會繼續播；切回來可以按停止，或直接按上方「停止」「淡出」

自訂音效組存在這台裝置的瀏覽器裡（電腦、手機各自分開）。 要搬到其他裝置：在「管理」按「匯出」得到 .soundset.json，再到另一台裝置「匯入」，自選的音檔也會一起帶過去。 想讓所有裝置都直接有某個音效組，可以把它加進 js/config.js 的 SOUND_SETS。

• 播放時會盡量讓螢幕保持常亮

注意

音樂版權屬原作者所有，請自行確認使用範圍（例如活動現場播放）。