2023年7月11日发(作者：)

vue⼀个页⾯实现⾳乐播放器的⽰例本⽂介绍了vue⼀个页⾯实现⾳乐播放器的⽰例，分享给⼤家，具体如下：效果如下：开发前构思界⾯做⾳乐播放器，界⾯⼀定要炫酷。太low了听歌没感觉。本⾝是为了在上班的时候⽤，于是做成了⼀个类似⽹易云⾳乐的界⾯，⼤⼩合适。不⽤兼容⼿机端。⽤css做图标本怀着简单实⽤的需求去考虑，图标可⽤SVG、url或者css。相对于url，SVG和css更好⼀些。为了修炼，最终选择的css。利⽤好after和before，能减少很多dom嵌套。.next { position: relative; display: inline-block; 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; display: block; border: 10px transparent solid; border-right-width: 0; border-left-color: #fff; position: absolute; top: 8px; left: 10px;}.next:after { content: ''; height: 20px; width: 4px; display: block; background: #fff; position: absolute; top: 8px; left: 22px;}画⼀个唱⽚⽹易云的唱⽚很好看，我也要弄⼀个唱⽚! ⽤好 box-shadow ，⼀个元素便可以做成很好看的唱⽚效果。.disc { position: relative; margin-top: 10%; margin-left: 10%; width: 300px; height: 300px; border-radius: 300px; transform: rotate(45deg); background-image: radial-gradient(5em 30em 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]::-webkit-slider-thumb{ -webkit-appearance: none;}

input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 20px;}input[type=range]:focus { outline: none;}input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -3px; height: 14px; width: 14px; background: #eb7470; border-radius: 50%; border: solid 3px #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);}背景滤镜模糊将图⽚设置为背景的感觉很棒，可以说整个播放器的颜值这背景提供了⼀半。设置也⾮常简单，⽤到了css3的滤镜。.bg-blur { position: absolute; top: 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控制。

歌曲资源爬下接⼝解决跨域问题因为接⼝⽀持jsonp。起初尝试将chrome浏览器设置跨域，然后通过$.ajax去做⼀个jsonp的请求。可以正常访问。之后突然不⾏了，是不是虾⽶做了限制?遂改⽤node启动⼀个服务，去伪造referer发起请求，再将请求转发到页⾯。⽆意中写了⼀个代理。...case '/song': let songOptions = { url: '/web?'+ urlArr[1], headers: { 'Referer': '/' } }; function callback1(error, response, body) { if (!error && Code == 200) { (body); } } request(songOptions, callback1); break;...歌词滚动作为⼀款逼格⽐较⾼的播放器，歌词滚动是必须的。原理将每⼀句歌词保存为⼀个对象，有对应的时间。当歌曲播放的当前时长⼤于或等于歌词的时间，⼩于此歌词的下⼀句歌词的时间，那么就将此歌词滚动到可视区域。并且修改字体颜⾊。格式化歌词接⼝返回的歌词⼀脸懵逼，仔细研究⼀下，发现是有规律的。[ti:aLIEz][ar:SawanoHiroyuki[nZk]:mizuki][al:o1][ly:澤野弘之][mu:澤野弘之][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 = ('[offset:0]')[1]; let textArr = ('n'); let lyricsArr = [], translate = []; h((item, index) => { let time = 0, text = ''; if (f('[x-trans]') > -1) { (('[x-trans]')[1]) } else if (() != '') { time = (1, 6).split(':'); time = parseInt(time[0]) * 60 + parseInt(time[1]); text = (11); let arr = ('>'); let str = ((a, b) => { return ('<')[0] + ('<')[0] }); let obj = { time: time, text: str }; (obj); } }); for (let i in translate) { lyricsArr[i].text = lyricsArr[i].text + 'n' + translate[i]; } tLyrics = lyricsArr;},搜索栏实现同⽂件下⼦组件挂载为了遵循模块化开发，决定将搜索栏写成⼀个⼦组件。在同⼀页⾯下写⼦组件，⼦组件挂载到对应的template就有讲究了。此template不能被⽗组件的挂载元素包含，否则⽗组件渲染时会因为⽆法渲染⼦组件中的数据⽽报undefined。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写成⼀个全局函数，如果不这样写，⽽是通过ck的形式，this指向将为methods。⽽⽆法直接给searchBox的data赋值。 于是通过eventBus来处理，这样更易维护。var EventBus = new Vue();var callBack = function(result) { (result); EventBus.$emit('callBack', result);};...mounted(){ let self = this; EventBus.$on('callBack', function(res) { if (res && ) { List = ; } })}...localStrong储存歌曲信息下次再打开，应该播放列表应该保留上⼀次的数据，这个可直接⽤localstrong实现踩了坑prop传递数据使⽤cdn，vue的prop只⽀持中线格式，驼峰格式不⽣效ps: 在⽤webpack打包的项⽬中⽤驼峰是可以，在打包过程中，会做处理。// 正确写法// 错误写法待优化⼿动修改进度，偶尔会不⽣效。搜索暂不⽀持分页不⽀持建歌单背景颜⾊与进度条颜⾊相近需修改进度条颜⾊不⽀持播放模式选择-单曲循环-随机播放以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。