HTML5实现的经典播放器Winamp

发表于 2021-07-30 更新于 2024-11-22 分类于各种折腾 Waline：阅读次数：本文字数： 1.9k 阅读时长 ≈ 2 分钟

用 HTML5 和 JavaScript 重新实现的 Winamp 2.9，具有完整的皮肤支持。

什么是 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 系统，但是主要是作为无头机用的。

首先当然是下载源代码

1 2	# 下载代码 git clone https://github.com/captbaritone/webamp.git

如果 git 下载代码出现下面👇的错误

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

可以通过设置 git 的 http 缓存大小，解决了这个问题

1 2	# 如果 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/