https://github.com/ahabhgk/vanilla-music
☘️ A so-simple music player. 🎶
https://github.com/ahabhgk/vanilla-music
Last synced: 2 months ago
JSON representation
☘️ A so-simple music player. 🎶
- Host: GitHub
- URL: https://github.com/ahabhgk/vanilla-music
- Owner: ahabhgk
- Created: 2019-05-08T14:47:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-24T09:08:08.000Z (about 6 years ago)
- Last Synced: 2025-04-15T05:43:45.915Z (2 months ago)
- Language: CSS
- Homepage:
- Size: 1.87 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Vanilla Music](https://ahabhgk.top/vanilla-music/)
一个移动端 `PWA` 音乐播放器。
## 使用介绍
### 安装
[ahabhgk.top/vanilla-music](ahabhgk.top/vanilla-music)
在手机上使用 `chrome 浏览器` 打开，一般最下方会有提示 `添加到主屏幕`，没有可点击 `右上角`然后 `添加到主屏幕`。
PS：
1. 推荐 `chrome 浏览器`，虽然 iOS 的 `Safari 浏览器` 也支持 PWA，自己也对 `Safari` 进行了些适配，但调试时用的自己的 `安卓 + chrome`。
2. 安装时间可能有点长，有的时候会安装失败，就 `多试几次` 就可以，这是 PWA 本身的原因。
### 使用
#### 首页
搜索：点击 `左上角的双箭头` 打开 `搜索框`，输入关键字，在搜索结果中可点击 `添加音乐到歌单` 或 `添加并播放音乐`。
切换模式：点击 `右上角的开关` 进行 `白天模式` 和 `夜间模式` 的切换。
页面切换：点击 `上方上箭头` 切换到 `歌单页`，点击 `下方下箭头` 切换到 `播放页`。
#### 歌单
播放音乐：点击 `>` 播放 `已添加` 的音乐。
删除音乐：点击 `-` 删除 `已添加` 的音乐。
#### 播放页
调整播放进度：拖动下方 `蓝色进度条波浪部分`。
暂停播放：点击 `歌词展示框` 进行音乐的 `暂停和播放`。
下一首：在 `歌词展示框` 中 `左滑 `播放歌单中下一首音乐。
上一首：在 `歌词展示框 `中 `右滑 `播放歌单中上一首音乐。
PS：
1. 后端有的音乐资源不能播放，导致有的音乐点击播放后没有反应，只能换首歌。
2. 有的返回歌词格式不对，歌词不会显示。
3. 有时因为网络原因会导致搜索、添加和播放音乐等待时间很长。
4. 看效果可以直接搜 `space oddity` 第一首 `David Bowie` 的。
## 前端页面
### 样式
使用 `sass` 写的样式，自从用了 `sass` 就虽然还是不喜欢写样式，但比用 `css` 写舒服多了。
加入了 `夜间模式`，用的 `css` 变量实现，个人感觉比普通模式更好看。
标题使用了一个 `css animation`，为音乐播放时的动画。
### JavaScript
使用 `ES6` 语法，遵循 `airbnb 规范`。
因为用 `ES5` 继承 `原生对象` 不能用常用的寄生组合式继承，需要很麻烦的修改原型链，而且可读性并不好，所以用 `ES6 继承` Array 对象，实现 `musicList`（因为 ES6 继承原生对象使用 `babel` 编译成 ES5 时是用寄生组合式继承实现，浏览器会报错，所以没有使用 `webpack`，并没有考虑兼容性问题）。
用 `web component` 实现了一个 `播放器组件`。
### PWA
Progressive Web App，可以使网页像 `app` 一样添加到设备主屏幕，并离线使用。
## 后端接口
因为 PWA 需要 `https`，后端 `Koa2` 自己还没有系统的进行学习，所以后端接口在网上找了很多，几乎都尝试了一遍，最终只有 [我扒下了某音乐的 😂😂😂 V2.0](https://juejin.im/post/5c372e31518825253208edf2) 可以，真的很费时间 😡，而且返回的音乐有的 403，有的歌词格式不对，因此接下来我决心好好学习下 `Koa2`。