目標

1.在歌詞頁面顯示 歌名、歌詞
2.若有 YouTube 連結，顯示播放按鈕

javascript

// YouTube 連結資料
    const youtubeLinks = {
        // Requiem 專輯
        "Requiem-Amen": "https://www.youtube.com/watch?v=8EKC51KMvI0",
        "Requiem-Say": "https://www.youtube.com/watch?v=sI97pJcyeOs",
        "Requiem-Night": "https://www.youtube.com/watch?v=j5JeqNAnpVE",
        "Requiem-Soft Spot": "https://www.youtube.com/watch?v=4Lmcadu8ghM",
        "Requiem-Like That": "https://www.youtube.com/watch?v=zIrtq7VlJtg",
        "Requiem-Texas": "https://www.youtube.com/watch?v=KE8c23r9PLI",
        "Requiem-Dream": "https://www.youtube.com/watch?v=M2_tjzmbwQY",
        "Requiem-War": "https://www.youtube.com/watch?v=ID31XbN3qMo",
        "Requiem-Bodies": "https://www.youtube.com/watch?v=dei1SgfaQ-E",
        "Requiem-Requiem": "https://www.youtube.com/watch?v=2zFldPf3WAQ",
        "Requiem-Euphoria": "https://www.youtube.com/watch?v=EPMkXQK3uXM",
        "Requiem-Just To Die": "https://www.youtube.com/watch?v=TJ6ULZ48two",
        "Requiem-Id": "https://www.youtube.com/watch?v=Y6yLKQV4lrM",
        "Requiem-Kiss Me Right": "https://www.youtube.com/watch?v=i9DHduXUHqI",
        "Requiem-Forever": "https://www.youtube.com/watch?v=Rr3j5EiAxcM",
        "Requiem-Inside Out": "https://www.youtube.com/watch?v=A1h7DeR3eic",
        "Requiem-I Choose You": "https://www.youtube.com/watch?v=yQGbF19m5ew",


        // Gabriel 專輯
        "Gabriel-GET IT": "https://www.youtube.com/watch?v=5OLgj5s21Ps",
        "Gabriel-SOMEBODY": "https://www.youtube.com/watch?v=uV2yMgh85qU",
        "Gabriel-WESTSIDE": "https://www.youtube.com/watch?v=x_vwAzBsuWM",
        "Gabriel-TOUCH": "https://www.youtube.com/watch?v=juMQWThd5rQ",
        "Gabriel-MILLI": "https://www.youtube.com/watch?v=ZnxqCeArPko",
        "Gabriel-PÈRE": "https://www.youtube.com/watch?v=_4JMuv0Ezuw",
        "Gabriel-HELL/HEAVEN": "https://www.youtube.com/watch?v=HLFtTPbI6XU",
        "Gabriel-ANGOSTURA": "https://www.youtube.com/watch?v=SqFJEIT35k8",
        "Gabriel-UNDERSTAND": "https://www.youtube.com/watch?v=xI_FMutRZX8",
        "Gabriel-LIMBO": "https://www.youtube.com/watch?v=ssIiBm0ORuI",
        "Gabriel-ANGEL": "https://www.youtube.com/watch?v=nVLfZmVpVOI",
        "Gabriel-GABRIEL": "https://www.youtube.com/watch?v=VPVNhp6t50o",


        // Trilogy 專輯
        "Trilogy-altas": "https://www.youtube.com/watch?v=ZJn01aL06lA",
        "Trilogy-skeketons": "https://www.youtube.com/watch?v=w_6fWYY6pRw",
        "Trilogy-summer": "https://www.youtube.com/watch?v=JqZgy6nNRCI",
        "Trilogy-xoxosos": "https://www.youtube.com/watch?v=uTUjfI3vYkM",
        "Trilogy-less of you": "https://www.youtube.com/watch?v=mtoeTzYKyaQ",
        "Trilogy-alright": "https://www.youtube.com/watch?v=SCkTVEWnWdw",
        "Trilogy-blue": "https://www.youtube.com/watch?v=o3zVtbw0VDM",
        "Trilogy-right here": "https://www.youtube.com/watch?v=8ulR00x-B1I",
        "Trilogy-bandaids": "https://www.youtube.com/watch?v=JKCneM3C8R8",
        "Trilogy-always": "https://www.youtube.com/watch?v=GBUAez6w5ec",
        "Trilogy-more": "https://www.youtube.com/watch?v=T6kUPg_4k7w",
        "Trilogy-drunk": "https://www.youtube.com/watch?v=4HLumkaPcCI",
        "Trilogy-talk": "https://www.youtube.com/watch?v=gH1c833_-fc",
        "Trilogy-B.Y.S.": "https://www.youtube.com/watch?v=qEWFxJlmqlg",
        "Trilogy-us": "https://www.youtube.com/watch?v=CLLKAQcEh_Q",


        // Always 專輯
        "Always-always": "https://www.youtube.com/watch?v=GBUAez6w5ec",
        "Always-more": "https://www.youtube.com/watch?v=T6kUPg_4k7w",
        "Always-drunk": "https://www.youtube.com/watch?v=4HLumkaPcCI",
        "Always-talk": "https://www.youtube.com/watch?v=gH1c833_-fc",
        "Always-B.Y.S.": "https://www.youtube.com/watch?v=qEWFxJlmqlg",
        "Always-us": "https://www.youtube.com/watch?v=CLLKAQcEh_Q",


        // Bandaids 專輯
        "Bandaids-less of you": "https://www.youtube.com/watch?v=mtoeTzYKyaQ",
        "Bandaids-alright": "https://www.youtube.com/watch?v=SCkTVEWnWdw",
        "Bandaids-blue": "https://www.youtube.com/watch?v=o3zVtbw0VDM",
        "Bandaids-right here": "https://www.youtube.com/watch?v=8ulR00x-B1I",
        "Bandaids-bandaids": "https://www.youtube.com/watch?v=JKCneM3C8R8",


        // Skeletons 專輯
        "Skeletons-altas": "https://www.youtube.com/watch?v=ZJn01aL06lA",
        "Skeletons-skeketons": "https://www.youtube.com/watch?v=w_6fWYY6pRw",
        "Skeletons-summer": "https://www.youtube.com/watch?v=JqZgy6nNRCI",
        "Skeletons-xoxosos": "https://www.youtube.com/watch?v=uTUjfI3vYkM",


        // The Reaper 專輯
        "The Reaper-the reaper": "https://www.youtube.com/watch?v=i75fknHmM-U",
        "The Reaper-like i need u": "https://www.youtube.com/watch?v=40QXPac2sQM",
        "The Reaper-2 soon": "https://www.youtube.com/watch?v=LKZyp2cSAy4",
        "The Reaper-i swear i'll never leave again": "https://www.youtube.com/watch?v=AJ75-7IIjRs",


        // Good Days 專輯
        "Good Days-good days": "https://www.youtube.com/watch?v=rUtl2YAbAiQ",
        "Good Days-say something": "https://www.youtube.com/watch?v=elepsszF9Mo",
        "Good Days-GODSPLAN": "https://www.youtube.com/watch?v=shvDAtSJCeA",


        // If You're Not the One for Me Who Is 專輯
        "If You're Not the One for Me Who Is-if you're not the one for me who is": "https://www.youtube.com/watch?v=NJ-klY4zcYI",
        "If You're Not the One for Me Who Is-gose to waste": "https://www.youtube.com/watch?v=kCKW8Dxmvi0",
        "If You're Not the One for Me Who Is-they don't fly as high as they used to": "https://www.youtube.com/watch?v=JnIxEydn1n0",


        // EP And Coffee 專輯
        "EP And Coffee-Maybe(Ft.Andela Shang)": "https://www.youtube.com/watch?v=hZuAJQfahRI",
        "EP And Coffee-Still": "https://www.youtube.com/watch?v=_LWffEuLZ68"
    };




   // DOM 元素
    const songTitleElement = document.getElementById("songTitle");
    const lyricsContent = document.getElementById("lyricsContent");
    const youtubeBtn = document.getElementById("youtubeBtn");


    // 顯示資料
    if (songId && songTitles[songId]) {
        songTitleElement.textContent = songTitles[songId];
        lyricsContent.textContent = lyricsData[songId] || "歌詞尚未上傳";


        if (youtubeLinks[songId]) {
            youtubeBtn.href = youtubeLinks[songId];
            youtubeBtn.style.display = "block";
        } else {
            youtubeBtn.style.display = "none";
        }
    } else {
        songTitleElement.textContent = "找不到歌曲";
        lyricsContent.textContent = "";
        youtubeBtn.style.display = "none";}

程式說明

1. 抓取 DOM 元素

• songTitleElement → 顯示歌名
• lyricsContent → 顯示歌詞
• youtubeBtn → YouTube 播放按

2. 判斷 URL 的 songId 是否存在

• 若存在，顯示對應歌名與歌詞
• 若歌詞尚未上傳，顯示「歌詞尚未上傳」

3. YouTube 按鈕控制

• 若有對應連結，按鈕顯示並指向影片
• 若無，按鈕隱藏

4. 錯誤處理

• 當找不到 songId 或資料不存在時，顯示「找不到歌曲」，並隱藏 YouTube 按鈕

畫面展示