【導語】：Winamp 是一個超級經典的音頻播放器，誕生于 1997 年。它隨著 MP3 共享文件的繁榮而迅速走紅，如今已經名存實亡了。

用過 Winamp 這個軟件的人中，80 后應該居多。

Winamp 有很多插件，比如：Winamp 2. 的“歌詞伴侶”就非常實用。

今天推薦的開源項目就是 Winamp 2.9 的開源實現。

簡介

Webamp 使用了HTML5 和 JavaScript 對 Winamp 2.9 進行了重新實現，Webamp 可以運行在現代瀏覽器上，包括 Edge、Firefox、Safari 和 Chrome，不支持 IE。

項目地址是：https://github.com/captbaritone/webamp

下載安裝

• 使用 npm 安裝：

npm?install?--save?webamp

• 直接引入：

<script?src="https://unpkg.com/webamp@1.4.0/built/webamp.bundle.min.js"></script>

• 將 Webamp 添加到自己的網頁中最簡單的方法：

<div id="app"></div> <script src="https://unpkg.com/webamp"></script> <script>new Webamp().renderWhenReady(app);</script>

用法

• 創建容器。在HTML中創建一個DOM元素，Webamp將使用它來查找其初始位置：

<div?id="winamp-container"></div>

• 初始化Webamp示例：

import Webamp from 'webamp';// 如果通過tag標簽引入，則Winamp可在全局`window`對象上使用： // const Winamp = window.Webamp;// 檢查當前環境中是否支持Winamp if(!Webamp.browserIsSupported()) {alert("Oh no! Webamp does not work!")throw new Error("What's the point of anything?") }// 所有配置都是可選的 const webamp = new Webamp({initialTracks: [{metaData: {artist: "DJ Mike Llama",title: "Llama Whippin' Intro",},url: "path/to/mp3/llama-2.91.mp3"}],initialSkin: {url: "path/to/skins/TopazAmp1-2.wsz"}, }); webamp.renderWhenReady(document.getElementById('winamp-container'));

• webamp的api包括很多函數方法，靜態方法、構造方法、實例方法等，詳細參考官方的api文檔。

后話?

我看到有微博網友是這樣調侃這個開源項目的：

@Funarp: 草，當年最費內存的播放器現在用最費內存的語言在最費內存的瀏覽器里面重制了

稍微解釋一下，2002年8月發布了 Winamp 3，不過其系統資源占用率高的一批。

當年就被很多用戶吐槽，好在 Winamp 立馬反應過來，分了兩條產品線來開發：保留經典的 Winamp 2，同時繼續改進 Winamp 3。?

為什么說 Winamp 經典？它還啟發了其他后繼播放器，比如：foobar 和千千靜聽。

隨著盜版操作系統內置千千靜聽，Winamp 在國內慢慢丟失市場了。

開源前哨 日常分享熱門、有趣和實用的開源項目。參與維護 10萬+ Star 的開源技術資源庫，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。

總結

以上是生活随笔為你收集整理的一代传奇！经典播放器 Winamp 的开源实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。