https://github.com/mysteryven/sony-walkman

jquery js music-player mvc

Last synced: 3 months ago
JSON representation

Preview:

README

# Music Player
cle
## 完成总结

今天我把上一曲、下一曲的功能删掉了，并添加了点击推荐歌单时候的 loading 动效，再调节了一下各个页面的切换效果，最后，已经做完了这个项目了。

这个项目我有一点不满意的地方就是切换播放和暂停时候的动态效果，就是达不到 Apple Music 的那种效果。但是有点接近了，目前就先这样子。

这是我为了回顾 jQuery 来做的项目，但是我 ajax 请求没有用 jQuery，而是用的 axios，因为没用过这个做项目 :)

通过做这个项目，我真真切切的知道了用框架的简便！如果我用框架的话，我应该可以做更多功能。

下一个项目我就打算来做一个 Vue 或者 React 的项目了，加油啦！ -- 2018.10.16

## 我觉得这个项目好的地方

1. 模仿 Apple Music 和网易云音乐的界面设计。

2. 在播放界面添加了几个简单的动画。我很喜欢当点击首页下面的当前歌曲跳转到播放界面的功能

因此时我加了三个动画：

- 播放界面的高度
- 封面的由左下角宽度和高度同时变化
- 点击播放封面放大并添加了合适阴影效果让它更好看

3. 在我的、发现、搜索、播放页面都实现了前端路由，都支持分享。我很满意我做分享播放页的方法：在锚点后面加 `-n` 或 `-y` 来代表是否在播放。

4. js模块化，使用 Promise 来处理异步。

## 笔记

1. transition-orgin 来控制动画的起点。

## 根据 Bug 得来的总结

### tip1

点击 tab 状态栏就消失了，我估计是锚点的影响，后来解决了，原来加锚点作为路由的时候
也是有技巧的：

```link
http://127.0.0.1:5500/src/index.html#/find -> true
http://127.0.0.1:5500/src/index.html#find -> false
```

错误的原因的就是因为路径中少了个 `/` 。

本来我还在想为什么 Vue 的路由链接是很奇怪的 `http://baidu.com/#/find` ，既然用锚点为什么要多一个斜杠？现在我懂了，没有那个 `/` 就会出现未知 Bug。

（完）