项目背景：
音乐播放器WebApp是我在自学了vue之后，独自完成的一个项目，目的是把所学的vue知识点实际的综合应用起来。
项目简介：
本项目包括五大块，分别是：用户中心、推荐、歌手、排行和搜索。在用户中心，用户可以查看自己最近所听的歌曲以及自己收藏的歌曲。在推荐页面，首先有一个轮播，轮播图下面是推荐的歌曲内容。在歌手页面，是歌手列表，用户可以通过右侧的导航条快速找到自己要找的歌手。排行页面是流行歌、热歌、新歌等的一个歌曲排行榜。搜索页面，用户可以通过在搜索框中输入关键字，搜索歌曲或者歌手。项目中的难点在于播放器内核的开发、歌曲列表组件的开发和搜索页面的开发。
项目技术简介：
项目中主要用到的技术有HTML、CSS、vue、ES6基础、JSONP请求、webapck。在项目中，页面的很多地方是相似的，把相似的地方作为组件进行开发，这样可以进行组件的复用。四个主页推荐、歌手、排行和搜索页面之间的跳转是通过vue中的路由实现的，在每个页面下面又用到了子路由进行页面的跳转。父组件与子组件通信不是问题，但是子组件与子组件的数据通信就出现了障碍，这里我用的是vuex来解决的。页面中的数据是通过网络请求获取的，这里就用到了JSONP跨域。由于图片请求时，一次加载很多，用到了图片懒加载技术。
推荐页面简介：
这是推荐页面，主要是实现轮播图和点击热门的歌单跳转到歌曲列表页面，歌曲开始播放，这里用到的技术是子路由。
歌手页面简介：
这是歌手页面，用户可以通过右侧导航栏快速找到相应的歌手，导航栏可以滑动，可以点击，这里用到的技术是一些细节上的逻辑计算。点击歌手，跳转到这名歌手的歌曲列表，这里用到的技术是子路由技术。
排行页面简介：
这是排行页面，点击排行列表，可以显示出相应的歌曲列表，这里用到的也是子路由技术。
搜索页面简介：
这是搜索页面，用户可以输入相关的搜索词，然后下面会展示相应的搜索结果。这里呢，如果搜索框里面有值，就隐藏热门搜索和搜索历史两大块，如果没有，则显示两大块。热门搜索是动态获取的数据，然后绑定在页面，历史搜索是将搜索的历史存储在本地，通过了Storage这个库来实现的，它是LocalStorage和SessionStorage的封装。搜索功能的实现，是通过搜索框中的关键词去从网上抓取的数据中查找关键字，然后判断它是歌曲名还是歌手名，最后将包含关键字的所有数据全部返回。搜索列表出来以后，如果点击歌手，会跳转到该歌手的歌曲列表，如果是歌曲，直接跳转到播放界面，进行歌曲播放。还可以将搜索历史一个个删除或者一起删除，一起删除的时候会弹出一个confirm提示用户，是否要删除，这样使得人机交互的体验更加完美。
歌曲列表页面简介：
歌曲列表页面是显示如下，点击随机播放，会开始随机播放歌曲，然后这里是通过产生随机数打乱了初始的歌曲列表，然后同时开始播放歌曲。点击下面的歌曲，相应的歌曲会开始播放。点击左上角按钮会回退到上一次的页面。点击下面右下角的list按钮，会显示当前的播放列表。
播放歌曲页面简介：
播放歌曲页面是整个音乐播放器的核心所在，也是难点所在，首先由播放暂停按钮，以及上一首歌，下一个首歌曲的切换功能。主要的就是歌曲的播放模式的切换功能以及收藏功能，歌曲的播放模式由单曲循环，随机播放和顺序播放，顺序播放不需要对也去的列表做更改，随机播放和歌曲列表页面的随机播放功能实现方式是一样的。单曲循环是通过当歌曲时间结束的时候，我们将其置为0，然后再调用play()方法即可实现单曲循环播放。播放模式切换的时候，我们正在播放的歌曲是不能切换的，这里我们将此时播放的歌曲的id存储下来，并将新的模式下的播放列表的当前播放歌曲的id设置为上次存储下来的id。当以首歌曲播放结束以后，自动跳下一首歌曲，利用的是audio标签的@ended派发的事件，当他结束的时候，我们将此时的CurrentIndex加1，这样就切换至下一首歌曲。下来就是时间轴的编写，我们可以通过点击或者拖动改变歌曲当前的播放进度，首先我们要通过audio的@updateTime获取到它当前播放的时间，然后根据当前播放的时间去设置歌曲的播放时间，同时按照当前播放时间占取的歌曲总时间的百分比去改变进度条的位置。让进度条和歌曲的播放时间相对应。接下来就是点击一下页面，会跳转到歌词页面。
歌词页面简介：
歌词页面的编写，就是让当前歌词高亮。我们借助了lyric-parser，然后调用了它的paly()方法让歌词开始播放，设置一个当前播放的歌词的CurrentNum，如果此时的LineNum等于CurrnetNum，就给此时歌词绑定一个一个class，让他显示高亮。为了让歌词页面滚动，我们这里调用了Scroll组件。当我们滑动进度条或者点击进度条的时候，要对应到歌词上面，这里使用了lyric-parser的seek方法，将当前的播放时间传入。
当前播放列表页面简介：
当前播放列表会显示当前播放列表里面的内容，点击相应歌曲，歌曲开始 播放，然后点击每个歌曲后面的叉，会从歌曲列表删除这首歌曲，如果点击上面的删除按钮，会删除歌曲列表中所有歌曲，这是会弹出来一个框，显示是否确认要清空，这样使得人机交互更加完善。
用户中心简介：
用户中心显示用户最近所听的歌曲和收藏的歌曲，这里用户也可以点击随机播放，然后开始播放我喜欢的歌曲或者最近听的歌曲。
项目心得：
这个项目前前后后自己写了二十几天，在这期间，遇到了很多的问题。项目中主要遇到的问题：（1）如说从网上抓取数据，抓取不到，自己通过网上查资料，用了代理，然后获取到了数据。 （2）在给数组设置默认值的时候，我设置成了null，结果当数据还没有查找到的，执行后面的程序，就出现了bug，自己一直不知道Bug出现在哪里，找了好久，才找出来，最后修改了数组默认值，修改好了程序。（3）在整个项目中一些公用数据用的是vuex来进行设计的，之前自己没有使用过vuex进行过相关的练习，只对他有一个基本概念，在这个项目中，对vuex的使用，自己也是查了很多资料，才完成的。（4）下方的mini播放器的圆圈代表播放进度的实现，查了很多资料，最后是通过SVG实现的。
从刚开始的环境搭建都出问题，到后来的快速定位问题，我觉得自己有了一定的进步，对于组件化的开发，更加的熟悉，以及对vue的了解也更深入了。以及对于ES6的基础语法也熟悉了很多，以及对JSONP的理解也加深了一步。通过这个项目，我明白了当把自己所学的知识运用起来的时候才是 真的学到了，而且这样学习的更快跟牢固。作为一个程序猿，最重要的就是动手和关注新事物，一定要多动手，在修改bug的过程中，也锻炼了自己的耐心，只有冷静分析才可以更快速的解决问题。总体来说，整个项目中运用的知识点还是很多，综合性很强。