什么是 Winamp ？

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

Winamp 是一個(gè)超級(jí)經(jīng)典的音頻播放器，曾經(jīng)統(tǒng)治過(guò)桌面端的音樂(lè)播放器市場(chǎng)，當(dāng)年是很多人的裝機(jī)必備，以豐富的插件支持和皮膚效果著稱，但后來(lái)因大公司的內(nèi)部斗爭(zhēng)，最終被其它播放器給取代了。目前最新的版本不是百度百科說(shuō)的 5.57 版 ，而是 5.8 版本，支持多國(guó)語(yǔ)言。

其實(shí)今天我們要介紹的并不是 Winamp 本身，而是用 HTML5 和 JavaScript 復(fù)刻的 Winamp 2.9，一個(gè)可以在瀏覽器里運(yùn)行的 Webamp

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

鏡像構(gòu)建

老蘇構(gòu)建鏡像一般在 CentOS 虛擬機(jī)里，不建議在群暉上這么干，雖然群暉也是 Linux 系統(tǒng)，但是主要是作為無(wú)頭機(jī)用的。

首先當(dāng)然是下載源代碼

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

如果 git 下載代碼出現(xiàn)下面👇的錯(cuò)誤

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

可以通過(guò)設(shè)置 git 的 http 緩存大小，解決了這個(gè)問(wèn)題

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

代碼下載成功后依次執(zhí)行下面的命令

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

打包完成

和我們之前介紹的發(fā)現(xiàn)導(dǎo)航nav不同，Webamp 因?yàn)椴恍枰薷呐渲梦募?#xff0c;所以可以考慮直接把編譯的靜態(tài)文件，也就是把 built 目錄直接丟給 nginx

相關(guān)文章：一個(gè)非常強(qiáng)大的靜態(tài)導(dǎo)航網(wǎng)站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;"]

開始構(gòu)建鏡像

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

安裝

在群暉上以 Docker 方式安裝。

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

端口

端口不沖突就行

本地端口容器端口

7080	80

運(yùn)行

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

因?yàn)槭菑?fù)刻的，所以也支持右鍵菜單

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

菜單上本來(lái)應(yīng)該還可以 Dropbox 中的音樂(lè)文件，但是因?yàn)榘踩珕?wèn)題未開放，具體看這里：https://github.com/captbaritone/webamp/issues/750

這個(gè)是 Mac OSX 的皮膚，太復(fù)古了，也不知道是哪一年的 MacOX

chrome實(shí)時(shí)字幕

如果聽(tīng)英文歌曲，可以嘗試下 chrome 的實(shí)時(shí)字幕，這個(gè)功能需要 chrome 89 及以上版本，該功能默認(rèn)沒(méi)有開啟，需要在 設(shè)置 --> 高級(jí) --> 無(wú)障礙 中啟用，也可以在控制界面啟用

控制界面只有在 chrome 播放音視頻的時(shí)候才會(huì)出現(xiàn)在插件欄

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

實(shí)時(shí)字幕目前只支持英文

字幕（歌詞）會(huì)出現(xiàn)在屏幕下方的中間，至于準(zhǔn)不準(zhǔn)確老蘇就不知道了

泡上一壺茶，慢慢享受音樂(lè)🎵吧，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/

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。