HTML5实现的经典播放器Winamp

什么是 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 本身,而是用 HTML5JavaScript 复刻的 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

可以通过设置 githttp 缓存大小,解决了这个问题

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

代码下载成功后依次执行下面的命令

1
2
3
4
5
6
7
8
9
10
11
# 进入目录
cd webamp/packages/webamp

# 安装依赖
yarn install

# 进入目录
cd demo

# 打包
yarn run build

打包完成

和我们之前介绍的发现导航nav不同,Webamp 因为不需要修改配置文件,所以可以考虑直接把编译的静态文件,也就是把 built 目录直接丢给 nginx

相关文章:一个非常强大的静态导航网站nav

Dockerfile 要放在代码 webamp/packages/webamp/demo 目录中

1
2
3
4
5
6
FROM nginx:1.12-alpine
MAINTAINER laosu<wbsu2003@gmail.com>

COPY /built /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

开始构建镜像

1
2
3
4
5
# 创建镜像  
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 文件,随便拖了几首 mp3playlist

菜单上本来应该还可以 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/