这章是播放器的重头戏-------音乐播放器的设置,学到了很多
基础组件,像songList这种被多次复用的组件,不写逻辑代码,它只派发事件！！！
写在前面:父组件向子组件传递的prop是可以实时变化的,子组件接受到的prop也是实时变化的,props是不会被子组件修改的。动画结束之后记得清除！:class="{'clsname': xxx}" class绑定的不一定是一个对象,还可以是一个计算属性返回值
1：
对播放器的样式进行分析,先暂时跳过把
2:
vuex相关,跳过
3：
播放器组件dom和基本样式,跳过
4:
vue的动画效果！ create-keyframe-animation
在vue中使用动画,在外层增加一个transition标签,一般定义两个属性,一个是enter-active(leave-active)和enter(leave-to),他们都是在元素消失或者出现这一过程的状态。transition是过渡,定义对什么属性进行过渡效果,时间为几秒。（还可以自定义缓动曲线,即bezier曲线,控制在0.4s时间内动画的速度快慢）
这张图即代表在normalplayer进入的时候,在0.4s时间内渐显,他的top向下移动100px,bottom向上移动100px
当然,我们还不满足这么简单的动画
像上图,我们要实现miniPlayer的小圆圈飞向大的圆圈的动画(没有视频。。大家发挥自己的想象力，233333)
相信大家第一个想到的都是用css里面的关键帧动画@key-frame吧。具体的css我就不说了,大家可以自己去百度一下。如果用纯css来写 我们可能这样写
但是这里就涉及到一个问题了，你怎么知道大圆圈中心的位置是多少？在不同手机上，不同圆圈的中心点不同的呀。所以我们需要用js来生成css代码,这里就要用到几个关键知识：
1.create-keyframe-animation动画库
create-keyframe-animation就是一个通过js创建css动画的库,当动画的坐标需要计算时,可以用到这个库
2.vue中transition的js钩子
注意：enter和leave中回调函数是必须的！！否则他们会被同步调用！
（两项都建议大家去看官方文档,挺简单的）
我们为每个钩子触发一个函数
enter周期的时候注册,记得结束时调用回调函数,这个动画的意思是一开始wrapper在左下角小圆圈的位置,60%的时候回到中间，100%的时候变回原形,中间有个弹性变小的过程
afterEnter的时候要清空动画,并且取消注册动画
leave的动画稍微简单,不需要用到create-keyframe-animation
5:
歌曲播放功能实现
具体思路如下:
1.为audio标签制定src来源
2.调用audio.play方法播放
涉及到的问题和解决方法如下:
1.为src用v-bind绑定歌曲来源
2.什么时候开始播放?最好的时机是currentSong改变的时候,因为当你点击songList或者其它按钮的时候,都是改变当前的currentSong,所以我们就要watch currentSong。
但是这里会有一个bug当你调用play的时候,dom还没有ready渲染好,所以会报错,我们需要在nextTick再去操作dom
实现上面几步后,现在已经可以播放歌曲了。那我们又遇到一个难题,怎么让它停下来?
之前在vuex中设置过playing状态,当它为true时,我们调用this.$refs.audio.play()，否则调用this.$refs.audio.pause()。但是紧接着又来了,你怎么设置playing状态?当然是通过暂停播放按钮啦,给它添加一个click事件,调用mutation方法,同时要改变它的class，对了normalPlayer和miniPlayer是一样的！
好啦，现在我们大功告成，已经可以实现基本的播放暂停操作了。然后我们还要让这个cd旋转起来！ 用到css的animation动画,跟之前的keyframe是一样滴,当playing的时候给它加上play类名,反之则加上pause类名
6:
接下来我们来实现歌曲的前进后退功能。
实现该功能,本质上是改变currentSong,在vuex中currentSong是通过playlist和currentIndex得到的(getter也能充当计算属性)
那么,我们给前进和后退按钮各自绑定一个click事件,改变currentSong,注意控制边界条件，如果是上一首歌是暂停,点击下一首歌默认播放。（if(!this.songReady) return}这句话是干嘛的等会会讲）
好啦,现在是真ojbk了。你的播放器现在有大概的雏形了,但是身为一个有节操的程序员,程序中发现了错误就要及时修改哟,比如当你快速切换下一首歌的时候,dom有时候还没渲染好会出现这样一个错误
我们当然要fix这个错误,audio标签在准备好播放的时候,会触发一个canplay事件,出错的时候会触发error事件(具体事件请看文章最下方),我们对这两个事件进行操作。
添加一个songReady标志位,默认为false,在ready的时候置为true
再结合上面的next函数看看,你是不是就理解了呢？
7:
接下来让我们来试试修改当前时间吧！
audio标签播放的时候会实时触发一个很重要的事件timeupdate,一般控制歌曲播放都是靠它。e.target是audio标签。而e.target.currentTime是指当前播放的时间,它是可读写的,你可以直接修改它。
这个事件触发的时候我们给它设置一个函数,在这个函数中我们获取两个东西:currentTime和totalTime。因为这两个都是时间戳,所以还需要定义一个format函数格式化我们得到的时间戳
8:
进度条组件百分比播放实现
思考一下,这样的功能要怎么实现呢？ 我们可以通过currentTime / totalTime 获得一个百分比,然后让进度条的宽度随着这个百分比的增大而增大
我们来写一个progressBar组件,它接受一个percent props,progress的长度就是经过了多少时间,progressBtn就是那个小圆头,BallWidth就是小圆球的宽度。这里要注意这篇文章开头写的一句话：props是实时改变的。 我们来watch props的变化
9:
进度条拖拽功能实现
因为audio.duration是一个可改的变量。你在子组件拖动进度条的时候,不止要改变progress的宽度,同时还会有一个新的percent,再touchend的时候你传到父组件去修改audio.duration。点击进度条的时候如果用的是click事件,获得偏移量要通过e.offsetX。如果是touchstart事件就通过e.touches[0].pageX获取
这里还会有一个小bug,如果你不加this.touch.isTouch这个标志位的话,你在滑动的时候,percent也在改变,这时候还会调用watch里面的方法设置offsetWidth。所以我们增加一个标志位来判断进度条长度的变化是不是由拖拽产生的。
10:
圆形进度条的实现(svg不会。。跳过。。)
11:
设置歌曲播放模式,需要注意的点是nextMode = (this.mode+1) %3。注意这个的打乱算法,改变歌曲顺序的时候注意this.currentSong是靠this.currentIndex和this.playlist获得的,如果只是打乱playlist的话,currentSong就会变化,所以要同时改变playlist和currentIndex
12：
完成剩下的进度条功能,拉到最后的时候拉到下一首歌,需要触发ended事件,如果是loop模式,在播放完之后要让audio.currentTime = 0
回到musicList组件,完成随机播放全部的按钮,点击这个之后,应该改变vuex的mode,playing,触发的mutation有点多,就把它封装到action里面去
但是还会有一个bug,当你是随机播放的时候,点击music-list里面的歌,它弹出来的跟你的预料的不同
为什么呢? 是因为我们点击music-list的时候,会调用我们之前写的action,然后我踩了一个坑。。。
这个坑以后一定要注意了！！！
在shuffle函数里面，我设置了newArr = arr 这是一个浅拷贝,是地址引用,这样你对newArr做修改 arr也会改变,所以在调用之前的action的时候,传入的shuffle过的数组！！！！同时,你点击随机播放全部的时候,player组件里面对mode的watch也会生效,就会再次mutation一个playlist
audio标签事件如下：
