目標

1.在歌名後新增 lyrics 按鈕，點擊後跳轉到歌詞頁面。
2.完成第一張專輯的歌曲歌詞填寫。

實作過程

• 修改 album.js，每首歌後面新增 lyrics 按鈕，URL 參數格式為 ?song=專輯名稱-歌曲名稱。
• 建立 lyrics.js，完成第一張專輯的歌詞資料 lyricsData。
• 歌詞頁面使用 URL 參數抓取歌名與歌詞，單曲與專輯統一顯示。

JavaScript

album.js

// 取得網址參數 id
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");


// 如果有對應專輯就顯示
if (albums[id]) {
    const album = albums[id];
    document.getElementById("album-title").textContent = album.title;
    document.getElementById("album-cover").src = album.cover;
    document.getElementById("album-year").textContent = "Released：" + album.year;
 
    const songList = document.getElementById("album-songs");
    album.songs.forEach((song, index) => {
        const li = document.createElement("li");
     
        if (typeof song === "string") {
            // 舊格式（沒有物件的）
            li.textContent = `${index + 1}. ${song}`;
        } else {
            // 有物件（包含 name + url）
            li.innerHTML = `
                  <div class="song-item">
                        <span>${index + 1}. <a href="${song.url}" target="_blank">${song.name}</a></span>
                        <a href="lyrics.html?song=${album.title}-${song.name}" class="lyrics-btn">lyrics</a>
                  </div>
            `;
        }
     
        songList.appendChild(li);
    });
     
} else {
    document.body.innerHTML = "<h2>找不到這張專輯</h2>";
}

程式說明

• 先抓取 URL 中的 id，對應專輯資料
• 針對每首歌曲生成列表
• 若歌曲是物件（包含名稱與 YouTube 連結），則生成 Lyrics 按鈕，並設定跳轉到 lyrics.html 的對應 URL
• 確保使用者點擊按鈕就能進入歌詞頁面

畫面展示