什么是 Winamp ？

Winamp是數字媒體播放的先驅，由Nullsoft公司在1997年開發，創始人Justin Frankel，該軟件支持MP3， MP2， MOD， S3M， MTM， ULT，XM， IT， 669, CD-Audio，Line-In等等格式，至今已經從1.0版本升級到5.57版本。【百度百科】

Winamp 是一個超級經典的音頻播放器，曾經統治過桌面端的音樂播放器市場，當年是很多人的裝機必備，以豐富的插件支持和皮膚效果著稱，但后來因大公司的內部斗爭，最終被其它播放器給取代了。目前最新的版本不是百度百科說的 5.57 版 ，而是 5.8 版本，支持多國語言。

其實今天我們要介紹的并不是 Winamp 本身，而是用 HTML5 和 JavaScript 復刻的 Winamp 2.9，一個可以在瀏覽器里運行的 Webamp

不愿意折騰的可以直接在這里試用：https://webamp.org/

鏡像構建

老蘇構建鏡像一般在 CentOS 虛擬機里，不建議在群暉上這么干，雖然群暉也是 Linux 系統，但是主要是作為無頭機用的。

首先當然是下載源代碼

# 下載代碼 git clone https://github.com/captbaritone/webamp.git

如果 git 下載代碼出現下面👇的錯誤

error: RPC failed; result=35, HTTP code = 0 fatal: The remote end hung up unexpectedly

可以通過設置 git 的 http 緩存大小，解決了這個問題

# 如果 20M 不行就 50M git config --global http.postBuffer 20M

代碼下載成功后依次執行下面的命令

# 進入目錄 cd webamp/packages/webamp# 安裝依賴 yarn install# 進入目錄 cd demo# 打包 yarn run build

打包完成

和我們之前介紹的發現導航nav不同，Webamp 因為不需要修改配置文件，所以可以考慮直接把編譯的靜態文件，也就是把 built 目錄直接丟給 nginx

相關文章：一個非常強大的靜態導航網站nav

Dockerfile 要放在代碼 webamp/packages/webamp/demo 目錄中

FROM nginx:1.12-alpine MAINTAINER laosu<wbsu2003@gmail.com>COPY /built /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

開始構建鏡像

# 創建鏡像 docker build -t wbsu2003/webamp:v1 .# 生成容器 docker run -d -p 7080:80 --restart=always --name webamp wbsu2003/webamp:v1

安裝

在群暉上以 Docker 方式安裝。

在注冊表中搜索 webamp ，選擇第一個 wbsu2003/webamp，版本選擇 latest。

端口

端口不沖突就行

本地端口容器端口

7080	80

運行

在瀏覽器中輸入 http://群暉IP:7080，就看到主界面了

因為是復刻的，所以也支持右鍵菜單

除了內置的幾首外，也可以加載本地的 mp3 文件，隨便拖了幾首 mp3 到 playlist 中

菜單上本來應該還可以 Dropbox 中的音樂文件，但是因為安全問題未開放，具體看這里：https://github.com/captbaritone/webamp/issues/750

這個是 Mac OSX 的皮膚，太復古了，也不知道是哪一年的 MacOX

chrome實時字幕

如果聽英文歌曲，可以嘗試下 chrome 的實時字幕，這個功能需要 chrome 89 及以上版本，該功能默認沒有開啟，需要在 設置 --> 高級 --> 無障礙 中啟用，也可以在控制界面啟用

控制界面只有在 chrome 播放音視頻的時候才會出現在插件欄

瀏覽器插件欄上可以打開控制界面

實時字幕目前只支持英文

字幕（歌詞）會出現在屏幕下方的中間，至于準不準確老蘇就不知道了

泡上一壺茶，慢慢享受音樂🎵吧，enjoy it ~

參考文檔

captbaritone/webamp: Winamp 2 reimplemented for the browser
地址：https://github.com/captbaritone/webamp

如何在CentOS 7上安裝Yarn
地址：https://www.myfreax.com/how-to-install-yarn-on-centos-7/

總結

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

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