JSP 中 embed 標籤實現音樂播放列表切換（jQuery 版）

問題

單個 <embed> 只能播放固定音樂，如何實現多首歌曲切換播放？

解決方案：動態替換 embed 內容

利用 jQuery 監聽播放列表鏈接點擊，動態重寫容器 innerHTML 為新的 <embed> 標籤，瀏覽器會自動調用內置播放器播放新音樂。

完整代碼

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<table>
  <tr>
    <td id="tdPlayer"></td>
    <td id="tdPlayList">
      <b>播放列表</b><br>
      <a href="https://mp3a.9ku.com/hot/2004/07-16/33272.mp3">33272.mp3</a><br>
      <a href="https://mp3tuijian.9ku.com/tuijian/2014/12-18/656578.mp3">656578.mp3</a><br>
      <a href="https://mp3tuijian.9ku.com/tuijian/2014/12-25/656809.mp3">656809.mp3</a><br>
    </td>
  </tr>
</table>
<script>
$(function(){
  $('#tdPlayList a').click(function(){
    $('#tdPlayer').html('<embed src="' + this.href + '" loop="-1" autostart="true" hidden="false" >');
    return false; // 阻止跳轉
  });
});
</script>

原理與局限

• 原理：瀏覽器遇到新 <embed> 會實例化插件播放對應音頻。
• 局限：無法實現播放結束自動下一首（需 HTML5 <audio> + JS 控制）。
• 兼容性：<embed> 依賴瀏覽器插件，現代瀏覽器建議改用 <audio> 標籤。

現代化建議

<audio id="player" controls></audio>
<script>
$('#tdPlayList a').click(function(e){
  e.preventDefault();
  $('#player').attr('src', this.href)[0].play();
});
</script>

HTML5 <audio> 原生支持播放結束事件 ended，輕鬆實現自動播放列表。