ASP.NET 音樂播放器實現：HTML5 Audio、jQuery 插件與資料庫路徑綁定

需求分析

個人小型音樂網站，歌曲信息存儲於數據庫，用戶點擊歌曲列表項目，跳轉至播放器頁面並自動播放該曲目。

核心技術選型

推薦架構：HTML5 Audio + AJAX + 相對路徑

1. 數據庫設計

CREATE TABLE Songs (
    Id INT PRIMARY KEY IDENTITY,
    Title NVARCHAR(200),
    Artist NVARCHAR(100),
    FilePath NVARCHAR(500),  -- 相對路徑，如 /Music/2024/01/song.mp3
    CoverPath NVARCHAR(500),
    Duration INT  -- 秒
);

2. 後端 API (Web API / ashx / MVC Action)

// GET /api/songs/{id}
public IHttpActionResult GetSong(int id) {
    var song = db.Songs.Find(id);
    if (song == null) return NotFound();
    return Ok(new {
        title = song.Title,
        artist = song.Artist,
        url = ResolveUrl(song.FilePath),  // 轉為絕對 URL
        cover = ResolveUrl(song.CoverPath)
    });
}

// 輔助：相對路徑轉絕對 URL
private string ResolveUrl(string relativePath) {
    if (string.IsNullOrEmpty(relativePath)) return null;
    var request = HttpContext.Current.Request;
    return $"{request.Url.Scheme}://{request.Url.Authority}{VirtualPathUtility.ToAbsolute(relativePath)}";
}

3. 前端播放器頁面 (player.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>音樂播放器</title>
    <style>
        .player { max-width: 400px; margin: 2rem auto; text-align: center; }
        .player audio { width: 100%; }
        .cover { max-width: 100%; border-radius: 8px; margin-bottom: 1rem; }
    </style>
</head>
<body>
    <div class="player">
        <img id="cover" class="cover" src="" alt="封面" />
        <h3 id="title"></h3>
        <p id="artist"></p>
        <audio id="audio" controls preload="metadata">
            您的瀏覽器不支援 HTML5 Audio。
        </audio>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script>
        $(function() {
            // 從 URL 獲取歌曲 ID，如 player.html?id=123
            var songId = new URLSearchParams(window.location.search).get('id');
            if (!songId) return alert('缺少歌曲 ID');

            $.get('/api/songs/' + songId, function(song) {
                $('#title').text(song.title);
                $('#artist').text(song.artist);
                $('#cover').attr('src', song.cover);
                var audio = $('#audio')[0];
                audio.src = song.url;
                audio.play().catch(e => console.log('自動播放被瀏覽器阻止', e));
            }).fail(function() { alert('歌曲加載失敗'); });
        });
    </script>
</body>
</html>

4. 歌曲列表頁面綁定跳轉

// 列表頁 JS
$('.song-item').click(function() {
    var id = $(this).data('id');
    window.location.href = '/player.html?id=' + id;
});

關鍵點：路徑處理

• 數據庫存相對路徑（如 ~/Music/song.mp3 或 /Music/song.mp3），避免硬編碼域名/IP，利於遷移。
• 後端轉絕對 URL：使用 VirtualPathUtility.ToAbsolute + 當前請求域名，生成 https://domain.com/Music/song.mp3。
• IIS 靜態文件權限：確保音樂文件目錄有讀取權限，且 web.config 未阻擋 .mp3/.ogg 等 MIME 類型。

進階功能擴展

• 播放列表：前端維護隊列，audio.onended 觸發下一首。
• 歌詞同步：數據庫存 LRC，前端解析配合 audio.ontimeupdate 顯示。
• 播放統計：播放時 AJAX 記錄播放次數、用戶、時間。
• 斷點續傳/預加載：支援 Range 請求的靜態文件處理（IIS 默認支援）。

總結

對於個人小型音樂站，**HTML5 `