项目地址：https://github.com/ermu592275254/MiniMusicPlayer
演示地址：https://ermu592275254.github.io/MiniMusicPlayer/
开发前构想界面制作音乐播放器，界面必须酷。 太low了，听了歌也感觉不到。 这本身就是为了上班的时候用的，做了一个类似网易云音乐的界面，大小正好。 与手机端不兼容。
用css做图标
考虑到简单实用的需求，图标可以使用SVG、url或css。 比起url，SVG和css更好。 为了修炼，最终选择的css。 通过利用after和before，可以大幅减少dom嵌套。
. next { position: relative； 显示：在线块； height: 36px； width: 36px； border: 2px solid #fff； border-radius: 20px； -webkit-border-radius: 20px； -moz-border-radius: 20px； } .next:before { content: ' '； height: 0； width: 0； 显示：块； border :10 pxtransparentsolid； border-right-width: 0； border-left-color: #fff； 定位：助手； top: 8px； left: 10px； }.next:after { content: ' '； height: 20px； width: 4px； 显示：块； background: #fff； 定位：助手； top: 8px； left: 22px； } 画一个唱片
网云的唱片很漂亮。 我也会得到唱片！ 使用box-shadow，可以通过一个要素获得漂亮的唱片效果。
. disc { position: relative； 边距-顶部： 10 %； 边距-左边缘： 10 %； width: 300px； height: 300px； border-radius: 300px； 传输：旋转器(45 deg )； background-image : radial-gradient (5em 30 em ellipse，#fff，#000 )； border: 2px solid #131313； box-shadow: 0 0 0 10px #343935； opacity: 0.7； } 用range做进度条
audio本身的风格很难看。 另外，不同的浏览器有不同的效果。 当然可以修改audio的风格。 以前，使用controls属性隐藏audio，并用div进行替换。 现在是html5的时代。 当然，我们将使用更符合场景的新元素————range。
input [ type=range ] {-WebKit-appearance : none； width: 80%； height: 8px； border-radius: 10px； background-color: #fff； } input [ type=range ] :3360-WebKit-slider-thumb {-WebKit-appearance 3360 none； } input [ type=range ] :3360-WebKit-slider-runnable-track { height :8 px； border-radius: 20px； } input [ type=range ] : focus { outline : none； } input [ type=range ] :3360-WebKit-slider-thumb {-WebKit-appearance 3360 none； 边距-顶部：-3px； height: 14px； width: 14px； background: #eb7470； border-radius: 50%； border: solid 3px #fff； box-shadow:003pxrgba(255、255、255、0.5 )； } 背景滤镜模糊
可以说以图像为背景的感觉很棒，提供了一半的播放器整体的脸这个背景。 设置也非常简单，我使用了css3的过滤器。
. bg-blur { position: absolute； 顶级
: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(20px); z-index: -1;}背景图片通过js控制。
<div class="bg-blur" :style="`background-image:url(${currentSong.album_logo})`"></div>歌曲资源 爬下接口直接去虾米官网打开network,将url复制到postman里面去做请求。通过修改headers发现，会校验Referer。也就是说只有虾米允许的域名可以访问此接口。 http://api.xiami.com/web?v=2.0&app_key=1&key=aliez&page=1&limit=5&callback=jsonp154&r=search/songs
解决跨域问题因为接口支持jsonp。起初尝试将chrome浏览器设置跨域，然后通过$.ajax去做一个jsonp的请求。可以正常访问。
之后突然不行了，是不是虾米做了限制?
遂改用node启动一个服务，去伪造referer发起请求，再将请求转发到页面。无意中写了一个代理。
...case '/song': let songOptions = { url: 'http://api.xiami.com/web?' urlArr[1], headers: { 'Referer': 'http://m.xiami.com/' } }; function callback1(error, response, body) { if (!error && response.statusCode == 200) { res.end(body); } } request(songOptions, callback1); break;...歌词滚动作为一款逼格比较高的播放器，歌词滚动是必须的。
原理将每一句歌词保存为一个对象，有对应的时间。当歌曲播放的当前时长大于或等于歌词的时间，小于此歌词的下一句歌词的时间，那么就将此歌词滚动到可视区域。并且修改字体颜色。
格式化歌词接口返回的歌词一脸懵逼，仔细研究一下，发现是有规律的。
[ti:aLIEz][ar:SawanoHiroyuki[nZk]:mizuki][al:o1][ly:dqdyx][mu:dqdyx][ma:][pu:][by:ttpod][total:268512][offset:0][00:00.000]<195>aLIEz <199>- <451>SawanoHiroyuki[nZk]:mizuki[x-trans]彻头彻尾的谎言 - SawanoHiroyuki[nZk]:mizuki[00:01.095]<201>作<250>詞<200>：<201>澤<200>野<199>弘<300>之[x-trans][00:02.846]<200>作<150>曲<150>：<200>澤<200>野<351>弘<349>之[x-trans][00:20.828]<200>決<250>め<200>つ<201>け<149>ば<201>か<349>り[x-trans]一直独断专权[00:23.279]<200>自<200>惚<200>れ<200>を<200>着<400>た[x-trans]总是自负逞强[00:24.979]<200>チ<200>ー<200>プ<450>な<550>hokori<350>で[x-trans]明明只是一文不值的骄傲...... refactoringLyrics(lyric){ let text = lyric.split('[offset:0]')[1]; let textArr = text.split('n'); let lyricsArr = [], translate = []; textArr.forEach((item, index) => { let time = 0, text = ''; if (item.indexOf('[x-trans]') > -1) { translate.push(item.split('[x-trans]')[1]) } else if (item.trim() != '') { time = item.slice(1, 6).split(':'); time = parseInt(time[0]) * 60 parseInt(time[1]); text = item.slice(11); let arr = text.split('>'); let str = arr.reduce((a, b) => { return a.split('<')[0] b.split('<')[0] }); let obj = { time: time, text: str }; lyricsArr.push(obj); } }); for (let i in translate) { lyricsArr[i].text = lyricsArr[i].text 'n' translate[i]; } this.currentLyrics = lyricsArr;},搜索栏实现 同文件下子组件挂载为了遵循模块化开发，决定将搜索栏写成一个子组件。在同一页面下写子组件，子组件挂载到对应的template就有讲究了。此template不能被父组件的挂载元素包含，否则父组件渲染时会因为无法渲染子组件中的数据而报undefined。
<div id="app" class="main">...</div><template id="search-box">...</template>var searchBox = { template: '#search-box', props: { isShow: Boolean, openFun: Function }, data(){ return { resultList: [], searchValue: '', } }, methods: { } }; new Vue({ el: '#app', components: { 'com-tip': tip, 'search-box': searchBox }, ...})eventBus解决数据传输通过jsonp去请求数据，需要设置一个callback函数，此callback写成一个全局函数，如果不这样写，而是通过 searchBox.methods.callback的形式，this指向将为methods。而无法直接给searchBox的data赋值。 于是通过eventBus来处理，这样更易维护。
var EventBus = new Vue();var callBack = function(result) { console.log(result); EventBus.$emit('callBack', result);};...mounted(){ let self = this; EventBus.$on('callBack', function(res) { if (res && res.data) { self.resultList = res.data.songs; } })}...localStrong储存歌曲信息下次再打开，应该播放列表应该保留上一次的数据，这个可直接用localstrong实现
技术补充滤镜模糊 http://www.zhangxinxu.com/wordpress/2013/11/css-svg-image-blur/
css图标 http://www.uiplayground.in/css3-icons/
flex 兼容写法： https://www.cnblogs.com/iriszhang/p/6102524.html
flex 布局教程 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
滑动条样式自定义 http://blog.csdn.net/u013347241/article/details/51560290
隐藏滚动条兼容 https://segmentfault.com/q/1010000006863477
audio属性 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio
audio事件 https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events#Error_handling
踩了坑 prop传递数据使用cdn，vue的prop只支持中线格式，驼峰格式不生效
ps: 在用webpack打包的项目中用驼峰是可以，在打包过程中，会做处理。
// 正确写法<search-box :is-show="showSearch" :open-fun="openSearch" @push-song="pushNewSong" @play-song="playSong"></search-box>// 错误写法<search-box :isShow="showSearch" :openFun="openSearch" @pushSong="pushNewSong" @playSong="playSong"></search-box>待优化手动修改进度，偶尔会不生效。
搜索暂不支持分页
不支持建歌单
背景颜色与进度条颜色相近需修改进度条颜色
不支持播放模式选择-单曲循环-随机播放
更多专业前端知识，请上【猿2048】www.mk2048.com