1. 核心程式邏輯對照 (Logic Mapping)
了解積木與程式碼的對應關係。這裡展示了 AI2 中的常用功能，在 JavaScript 中該如何撰寫。點擊卡片翻轉查看 JS 程式碼！
宣告全域變數
initialize global [name] to
JavaScript
let name = ...;
const name = ...;
建立清單
make a list
JavaScript
const list = ["item1", "item2"];
點擊事件
when Button.Click
JavaScript
element.onclick = () => { ... };
選取清單項目
select list item [list] index
JavaScript
list[index - 1]
注意 JS 索引從 0 開始
隨機整數
random integer from 1 to 10
JavaScript
Math.floor(Math.random() * 10) + 1
🛠️ 實作步驟
透過三個主要步驟，在 VS Code 中建構你的音樂播放器 Web App。點擊步驟以查看對應的程式碼解析。
步驟 1：UI 配置 (HTML)
使用基本的 HTML 標籤建立播放器介面，包含按鈕、下拉清單及音量滑桿，這對應到 AI2 的 Screen1 元件佈局。
<!-- 對應 AI2 的 ListPicker --> <select id="music_select"></select> <!-- 對應 AI2 的 Slider --> <input type="range" id="volume_slider" min="0" max="100" value="50"> <!-- 對應 AI2 的 Button --> <button id="btn_play">PLAY</button> <button id="btn_random">RANDOM</button> <!-- 隱藏的 Player 組件 --> <audio id="audio_player"></audio>
步驟 2：宣告變數 (JavaScript)
對應 AI2 的 Initial Global，我們需要宣告陣列來儲存歌曲來源與顯示名稱，並將名稱動態加入到下拉選單中。
const listStream = [
"http://hwuim096013.byethost8.com/westlife.mp3",
"http://hwuim096013.byethost8.com/NOTTOGETHER.mp3"
];
const listRadio = ["Westlife", "Not Together"];
const select = document.getElementById('music_select');
listRadio.forEach((name, index) => {
let opt = document.createElement('option');
opt.value = index;
opt.innerHTML = name;
select.appendChild(opt);
});
步驟 3：事件與邏輯 (JavaScript)
設定當使用者操作 UI 時發生的動作，包括下拉選擇音樂、點擊播放按鈕與產生隨機數。
const audio = document.getElementById('audio_player');
// ListPicker.AfterPicking
select.onchange = function() {
let index = select.value;
audio.src = listStream[index];
audio.play();
};
// Button.Click (Random)
document.getElementById('btn_random').onclick = () => {
let randomIndex = Math.floor(Math.random() * listStream.length);
select.value = randomIndex;
select.onchange();
};
2. 實機展示與分析
左側是依據上述程式碼直接在網頁中運行的播放器實例。右側圓餅圖分析了這個專案的 JavaScript 程式碼邏輯佔比。
MP3 PLAYER
專案程式邏輯佔比分析
圖表展示了完成此播放器所需運用到的核心 JS 觀念比例，幫助理解學習重點所在。
3. 學生作業報告要求
請依據以下規範撰寫並繳交 PDF 報告。點擊展開各項目以確認詳細要求內容，確保你的報告能完整呈現實作成果與邏輯思考。
1. AI2 畫面：展示 Screen1 的元件樹 (ListPicker, Player, Slider) 與手機模擬器執行畫面。
2. VS Code 畫面：展示網頁瀏覽器中的執行畫面與程式碼編輯器截圖。
- Initial global：解釋你宣告了哪些變數（如存放檔名的音樂清單與顯示名稱清單）。
- When...Click：描述按下「播放」、「暫停」與「隨機播放」時，程式分別執行了什麼動作。
- Set...select list...index：詳細說明程式如何根據使用者在選單中選擇的序號 (index)，去對應清單中抓取正確的音樂檔案並播放。