ASP.NET 整合 Windows Media Player 實作線上音樂播放器

架構概覽

利用 ActiveX 控制項 CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 (WMP 9+)，透過 JavaScript 操控播放清單、播放/停止/音量。僅限 IE/Edge IE 模式，現代瀏覽器請改用 `

完整頁面程式碼

<%@ Page Language="C#" %>
<html>
<head>
<title>線上音樂播放器</title>
<script>
    var player = null;
    function init() {
        player = document.getElementById("MediaPlayer");
    }
    function addMedia(url) {
        player.settings.requestMediaAccessRights("full");
        var pl = player.currentPlaylist;
        var media = player.newMedia(url);
        pl.appendItem(media);
    }
    function clearList() {
        while (player.currentPlaylist.count > 0) {
            var item = player.currentPlaylist.item(player.currentPlaylist.count - 1);
            player.currentPlaylist.removeItem(item);
        }
    }
    function playSelected() {
        clearList();
        var inputs = document.getElementsByName("song");
        for (var i = 0; i < inputs.length; i++)
            if (inputs[i].checked) addMedia(inputs[i].value);
        player.controls.play();
    }
    function addCustomUrl() {
        addMedia(document.getElementById("songURL").value);
    }
</script>
</head>
<body onload="init()">
<object id="MediaPlayer" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    width="320" height="240">
    <param name="AutoStart" value="0" />
    <param name="UIMode" value="Full" />
    <param name="Volume" value="50" />
    <embed type="application/x-mplayer2" 
        pluginspage="https://www.microsoft.com/Windows/MediaPlayer/"
        width="320" height="240" showcontrols="1" showstatusbar="1" />
</object>
<br/><br/>
<input type="checkbox" name="song" value="mms://live.rgd.com.cn/914" /> 廣東新聞電台<br/>
<input type="checkbox" name="song" value="mms://live.rgd.com.cn/993" /> 廣東音樂之聲<br/>
<input type="checkbox" name="song" value="https://example.com/song.mp3" /> MP3 測試<br/><br/>
<button onclick="playSelected()">播放選中</button>
<button onclick="clearList()">清空清單</button><br/><br/>
自訂網址: <input type="text" id="songURL" value="https://" size="50" />
<button onclick="addCustomUrl()">加入清單</button>
</body>
</html>

支援協議與格式

• MMS (Windows Media Streaming) — `mms://host/path`
• HTTP 靜態檔 — `.mp3`, `.wma`, `.wav`, `.asf`
• ASX/WSX 播放清單 — 可指向清單檔

現代替代方案 (強烈建議)

<!-- HTML5 原生播放器，跨瀏覽器、無外掛 -->
<audio id="html5Player" controls preload="metadata">
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.ogg" type="audio/ogg" />
  您的瀏覽器不支援音訊播放。
</audio>
<script>
  const player = document.getElementById('html5Player');
  // 播放清單邏輯同前，改操作 player.src 與 player.play()
</script>

• 支援行動裝置、無 ActiveX 相依、可自訂 UI (CSS/JS)。
• 搭配 Media Source Extensions (MSE) 可實現 HLS/DASH 串流。

部署注意

• 舊版方案需用戶端安裝 Windows Media Player 並啟用 ActiveX。
• IIS 需設定 MIME 類型：`.mp3 → audio/mpeg`, `.wma → audio/x-ms-wma`, `.m3u → audio/x-mpegurl`。
• 跨網域串流需伺服器端支援 CORS 或代理轉發。