【115.7.5 AI教育年會 day3】和張威耑請教特殊音效的倒數計時器製作

 

張威耑老師真的是很促咪的AI大神，我被會產生「每日一字」、「小刀會」、「維士比」等音效的計時器迷住，而且這計時器還能增加到六個，因此組間分享時間結束後，我立刻詢問老師怎麼製作。

計時器的介面

以下是筆記部分：

步驟一：準備音效素材並上傳至 pCloud

由於 AI 生成的網頁 HTML 檔本身檔案很小，無法將音樂直接「包」在網頁裡，而是採用外連（連結）的方式讀取聲音。因此，您需要一個能直接分享檔案真實網址的空間：

1. 準備音效：自行尋找或錄製所需的鬧鐘音效 MP3 檔案。

2. 上傳至 pCloud：將 MP3 檔案上傳至 pCloud 雲端硬碟。（張老師選擇 pCloud 是因為它買斷後可終身使用，且其網址特性可以直接被外連分享，避免像 Google 雲端硬碟或其他網路相簿常有抓不到真實檔案網址、導致 AI 無法讀取的問題）。

3. 獲取真實音效網址：從 pCloud 取得該音效檔案的公開分享網址（結尾需為 .mp3 的真實網址）。

步驟二：與 AI 協作生成程式碼

利用 AI（如 Gemini 或 ChatGPT）來編寫倒數計時器的程式網頁：

1. 提供素材連結：將步驟一取得的 pCloud 音效網址餵給 AI，並告訴 AI：「請讀取這個連結的音樂作為鬧鐘音效」。

2. 輸入功能指令：向 AI 提出功能需求，並透過對話逐步修改調整：

   • 多組鬧鐘：要求在同一個畫面上可以同時出現多個鬧鐘（張老師設定上限為 6 個）。

   • 同步按鈕：需要一個「同步按鈕」，按下後可以讓多個鬧鐘同步運作。

   • 功能選單：設計選單與必要的控制按鈕。

   • 聲音同步修正：若測試時發現某個鬧鐘響時另一個會斷音，需提醒 AI 修正為「聲音可以同時播放，彼此不干擾」。

步驟三：打包程式碼並建立網頁檔

當 AI 生成出符合需求的 HTML 程式碼後，將其轉換為網頁檔案：

1. 複製程式碼：將 AI 產出的程式碼完整複製下來。

2. 貼至記事本：在電腦中開啟一個全新的記事本（.txt 檔），將程式碼貼進去。

3. 修改副檔名：儲存檔案後，將該文字檔的副檔名從 .txt 改為 .html。

4. 本機測試：此時直接雙擊該 .html 檔案，電腦就會用瀏覽器將它開啟，即可直接在電腦上操作這個倒數計時器。

步驟四：發布網頁至網路空間（選填）

如果您希望這個倒數計時器不只在自己電腦上用，還能分享給別人使用：

1. 上傳網頁檔：將做好的 .html 網頁檔案同樣上傳到 pCloud（或其他支援網頁發布的免費空間，如 Google Sites / Google Shape 等）。

2. 分享連結：直接將該網頁的 pCloud 分享網址傳給其他人，大家點擊連結就能直接在線上執行這個特別音效倒數計時器了！