DIY一个自己的音乐播放器
2017.04.27
hzzly
前言：在最近的一个外包项目中包联盟(PC端)中使用到了video，遇到了好多坑。突发奇想来踩一踩audio的坑😀，果然一入深似海，👇下面将分享我的DIY之路-Vue音乐播放器。
注：本项目为开源项目，不能用于商业应用，仅供学习。有问题或建议发我邮箱：hjingren@aliyun.com
[温馨提示：pc浏览f12手机模式最佳,手机建议wifi下访问]
欢迎大家的star啦😄~
先来个预览：
更多预览：更多
👉老铁们，准备发车(技能点)：
👉坐好，出发
实现的功能
1、首页
2、底部播放控件
3、播放页面
4、播放列表
5、排行榜
6、音乐搜索
输入搜索关键词，点击放大镜图标
7、侧边栏
API
感谢作者把api整理的这么好(点个赞👍)
网易云音乐 NodeJS 版 API
目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| |——MagicMusic/
| |——build/
| |——confg/
| |——node_modules/
| |——src/
| | |——assets/ //静态文件
| | |——components/ //公共组件
| | |——api/
| | | |——index.js //axios封装与api
| | |——pages/ //存放项目页面
| | | |——classical.vue //古典歌曲页面
| | | |——collection.vue //排行榜
| | | |——home.vue //首页
| | | |——light.vue //轻音乐歌曲页面
| | | |——login.vue //登录页面
| | | |——popular.vue //流行歌曲页面
| | | |——radio.vue //电台歌曲页面
| | | |——rank.vue //排行榜列表
| | | |——search.vue //搜索页
| | | |——user.vue //用户
| | |——router/
| | | |——index.js //页面路由
| | |——util //公用方法
| | |——vuex / //存放vuex代码
| | | |——modules / //数据模块
| | | |——store.js //vuex主入口
| | | |——types.js //vuex的types文件
| | |——App.vue //父组件
| | |——main.js //入口文件
| |——static/
| |——.babelrc
| |——.editorconfig
| |——.gitgnore
| |——index.html
| |——package.json
| |——README.md
|
开发心得与总结
1、轮播图
首先感谢作者ShanaMaid/vue-image-scroll开源的代码，我把代码copy下来自己进行了一点修改(没有手指滑动效果)，因为这是移动端，少不了的手指滑动切换，所以添加了vue-touch(偷偷告诉你，vue-touch的next分支还是支持vue2.0的😜)。代码传送门
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <li v-for="(item,index) in image" :class="[move[index]]">
<v-touch class="vuetouch"
v-on:swipeleft="nextPic"
v-on:swiperight="prePic">
...
</v-touch>
</li>
methods: {
nextPic(event) {
let temp = this.move.pop()
this.move.unshift(temp)
},
prePic(event) {
let temp = this.move.shift()
this.move.push(temp)
},
}
|
2、歌曲操作(喜欢，分享，加入播放列表)动画、播放列表展开与删除歌曲动画
Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
- 条件渲染 （使用 v-if）
- 条件展示 （使用 v-show）
- 动态组件
- 组件根节点
1
2
3
4
5
6
7
8
9
10
| <transition name="move">
<div class="menu" v-show="item.menuShow">
...
</div>
</transition>
<transition-group name="slide" tag="div" class="list-wrapper">
<div class="item" v-for="(item, index) in listenLists" :key="item">
...
</div>
</transition-group>
|
transition-group一组过度动画，这里有个小坑的，之前看官网列表过渡的栗子，给每一项设置唯一的key值，一般都会用index。所以在做的时候就把index传给key，结果过渡老是不对，后来换成对应的item就正常了(生无可恋脸)。
3、直线进度条、弧形进度条
西班牙建筑大师曾说过：“直线属于人类，曲线则归于上帝”。在这里我大胆的使用了弧形来作为进度条，(几大热门音乐APP貌似还没有弧形进度条😄)。
这里我用到了Vue的绑定内联样式
1
2
3
4
5
6
7
8
9
10
11
12
|
<div class="progress-bar">
<div class="play"
:style="{width: (now / duration).toFixed(3)*100 + '%'}"></div>
</div>
<div class="process" @click="showToast">
<div class="line"></div>
<div class="pro" :style="{transform: `translateX(${translateX}) rotate(${deg*1 + 56.5*((now / size).toFixed(3))}deg)`}"></div>
</div>
|
4、本地存储
将一些数据缓存到localStorage，可以减少Http请求，从而优化页面加载时间。
在这个项目中首页歌曲列表以及搜索历史用到了本地缓存，拿搜索历史来举栗：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| created() {
if (!localStorage.searchHistory) {
let searchHistory = ['前端', '童话镇', '刚好遇见你']
localStorage.searchHistory = JSON.stringify(searchHistory)
}
},
methods: {
_search(keywords) {
let searchHistory = JSON.parse(localStorage.searchHistory)
let find = searchHistory.findIndex((val) => {
return val === keywords
})
find === -1 ? localStorage.searchHistory = JSON.stringify([keywords, ...searchHistory]) : ''
}
}
|
5、图片懒加载
使用了vue-lazyload插件
用法👉：
1
| $ npm install vue-lazyload
|
1
2
3
4
5
6
7
8
9
|
import VueLazyLoad from 'vue-lazyload'
import def_lazy_img from '../static/img/loading.gif'
Vue.use(VueLazyLoad,{
loading: def_lazy_img
})
<img v-lazy="item.al.picUrl" alt="">
|
6、歌词滚动与高亮
因为api提供的歌词包括时间，如：[03:57.280]原谅我这一生不羁放纵爱自由
所以首先要进行字符串切割：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div class="lyric">
<div class="roll-lyric" v-html="lyrics" ref="lyric"></div>
</div>
computed: {
lyrics() {
let lyrics = ''
this.lyricArr = []
if (this.lyric) {
let arr = this.lyric.split('\n')
for (let item of arr) {
if (item) {
let arr2 = item.split(']')
this.lyricArr.push(arr2[0].substring(1,3)*60+arr2[0].substring(4)*1)
if (arr2) {
lyrics += `<p class='lyrichook' style='margin: 10px 0'>${arr2[1]}</p>`
}
}
}
} else {
lyrics = '暂无歌词~'
}
return lyrics
}
}
|
然后在播放的监听事件中与播放的当前做对比：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| this.$refs.myAudio.addEventListener('play', () => {
this.pDOM = [...document.querySelectorAll('.lyrichook')]
timer = setInterval(() => {
this.now = audioDOM.currentTime
this.lyricArr.forEach((item, index) => {
if (parseInt(item) == parseInt(this.now)) {
this.pDOM.forEach((p) => {
p.style.color = 'rgba(255,255,255,.8)'
});
this.pDOM[index].style.color = '#f12c61'
this.$refs.lyric.style.transform = `translateY(-${(index-2)*25}px)`
}
});
}, 1000)
})
|
到这就ok了😜
7、vuex状态管理
推荐官方调试工具 devtools extension
想进一步理解vuex，可以看这篇博客vuex学习实践笔记
之前看到好多人写的vuex，把整个项目的数据放到了一个state里，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。
所以我建议(个人见解，轻喷)：将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters。这样方便管理与后期的维护。
车已到站✌️。
不知不觉写了这么多，老铁们凑合这看吧😁，觉得还行的可以点个star，你的star是我继续开源创作的动力，谢谢！！！
项目地址： https://github.com/hzzly/MagicMusic
欢迎大家的star啦~