当前位置: 首页 > Web前端 > vue.js

Vue开发——网易云音乐项目

时间:2023-03-31 17:29:43 vue.js

特别感谢Binaryify提供的api嗯,有人要吗?很久以前,我很想做一个音乐类的网站。做过移动端和小程序端,但基本半途而废。最近有时间想做一个功能比较完善的项目。项目使用的VUEUI框架为ElementUlcss预处理使用的手写笔自定义图标iconfontgitee地址:vue-desktop-nicemusic在线地址:http://nicenav.cn/desktop-music项目截图登录页面首页个人中心歌单播放目录说明#|--dist生成包下面的文件#|--node_modules安装依赖包#|--public静态资源会输出到目录dist#|--源#||--api使用相关方法和配置与后端交互#|||--services对应使用的api方法和数据处理#|||--instance.js封装了请求、拦截器等(axios、fetch)#|||--home.js家庭相关api#|||--config.js配置生产、开发、测试接口配置#|||--index.js服务文件api,统一导出#|||--resource.js全局常量#||--assets存放静态资源,图片等#||--components公共组件#||--模型处理数据、歌曲视频等...#||--routervue-router相关配置#|||--index.js导出路由配置,路由守卫配置#|||--routes.js所有路由#||--utils封装的工具函数#||--查看所有路由组件#||--app.vue顶级路由#||--main.js入口文件主函数歌词处理使用lyric-parser进行歌词解码asyncgetLyric(id){try{letres=awaitthis.$api.getLyric(id)if(res.code===200){letlyric=res.lrc.lyricthis.currentLyric=newLyric(lyric,this.lyricHandle)if(this.isPureMusic){consttimeExp=/\[(\d{2}):(\d{2}):(\d{2})]/gthis.pureMusicLyric=this.currentLyric.lrc.replace(timeExp,'').trim()this.playingLyric=this.pureMusicLyric}else{if(this.playing&&this.canLyricPlay){this.currentLyric.seek(this.currentTime*1000)}console.log(this.currentLyric)}}}catch(error){this.currentLyric=nullthis.playingLyric=''this.currentLyricNum=0}},在播放模式3切换播放模式,单曲,循环,随机exportconstplayMode={sequence:0,loop:1,random:2}切换按钮计算处理切换后的图标modeIcon(){returnthis.mode===playMode.sequence?'nicexunhuanbofang24':this.mode===playMode.loop?'nicebofangqidanquxunhuan':'nicebofangqisuijibofang'},切换播放模式的方法//切换播放模式changeMode(){constmode=(this.mode+1)%3this.setPlayMode(mode)letlist=nullif(mode===playMode.random){list=this.utils.shuffle(this.sequenceList)}else{list=this.sequenceList}this.resetCurrentIndex(list)this.setPlayList(list)},进度条控制的具体方法在进度条组件class="bar-inner">

音量控制//控制静音changeMuted(){if(this.isMuted){this.isMuted=falsethis.$refs.audio.muted=false}else{this.isMuted=truethis.$refs.audio.muted=true}},//改变音量changeVolume(e){this.volume=e/100this.$refs.audio.volume=e/100},整个项目的其余部分大约完成70%,历史回放和搜索功能还在完善中,有些细节要看时间处理了。总的来说,除了整首歌曲的播放过程,其他的对比都很简单,后面会慢慢完善。