獨立音樂人作品集平台

專案背景

獨立音樂人需要一個能完整展示個人風格與作品的專屬平台。主流音樂串流服務雖然觸及面廣，卻難以呈現創作者的獨特品牌，且收益分潤極低。客戶希望擁有一個「自己的家」——不受演算法左右，能直接與粉絲互動，並透過多元贊助管道獲得直接支持。

核心需求包括：高品質音頻播放、動態歌詞同步、多元贊助管道，以及 桌面與行動裝置 的完美體驗。

部署架構與成本優化（Cloudflare Pages）

本專案採用 Cloudflare Pages 邊緣部署。透過全球節點分發靜態內容，使用者可由最近節點取得頁面與資源，縮短首屏等待時間並提升跨地區瀏覽體驗。

相較傳統長駐主機模式，此架構可在維持穩定服務的前提下，明顯降低伺服器常態維運負擔。對獨立音樂人而言，不需先投入高額主機成本，也能擁有高品質、可擴充的作品展示網站。

藝人首頁

首頁以藝人個人檔案為核心，呈現頭像、簡介、粉絲數與播放量統計，並串接 Instagram、YouTube、TikTok 等社群平台連結。下方以卡片式佈局展示所有作品，每張卡片包含封面圖、曲名、曲風類型、時長與標籤，讓訪客一目瞭然。

行動版完整保留桌面版的所有功能，以單欄式佈局呈現，確保在手機上也能流暢瀏覽與操作。

歌曲詳情與動態歌詞

進入歌曲詳情頁，左側呈現封面視覺與完整歌曲資訊（曲風、BPM、時長、發行日期、作曲／作詞人），右側為音頻波形播放器與動態歌詞區塊。歌詞會隨播放進度逐句高亮，當前演唱段落以粗體強調，打造沉浸式聆聽體驗。

行動版以全幅封面圖搭配下方歌曲資訊呈現，向上滑動可進入播放器與歌詞區域。

播放清單與歌詞面板

點擊底部播放器的展開按鈕，即可開啟播放清單與歌詞面板。目前播放的歌曲以封面縮圖搭配歌手名稱顯示在頂部，歌詞區域隨播放自動捲動，當前句以粗體字醒目標示。

行動版同樣支援完整的播放清單與歌詞同步功能，提供全螢幕沉浸式歌詞體驗。

贊助創作者

平台整合多元贊助管道，粉絲可透過 虛擬貨幣（支援 BNB Chain、Polygon、Base 等 EVM 錢包）、PayPal 或 Gumroad 直接贊助創作者，讓創作者不再依賴平台抽成，獲得最直接的收益支持。

常駐播放器

底部常駐播放器貫穿整個網站，無論在哪一頁都能持續播放音樂，不會因頁面切換而中斷。播放器提供播放／暫停、上一首／下一首、進度條拖曳、音量調節等完整控制功能，並即時顯示歌曲名稱與歌手資訊。