Vanilla Music

一个移动端 PWA 音乐播放器。

使用介绍

安装

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 可以，真的很费时间 😡，而且返回的音乐有的 403，有的歌词格式不对，因此接下来我决心好好学习下 Koa2。