一、页面展示（后续还会完善功能）
二、已完成功能
1、搜索功能
2、音乐列表展示
3、歌曲图片展示和图片背景虚化效果
4、音乐播放动态效果
5、音乐暂停以及上下首切换
6、音乐时长获取及格式化
三、未完成功能
1、歌曲正在播放标识
2、播放模式
3、歌曲播放进度
4、音量调整
5、歌曲评论
四、页面代码
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>音乐播放器</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="fonts/iconfont.css"><link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" /><link rel="stylesheet" type="text/css" media="screen" href="css/player.css" /></head><body><div style="text-align:center;clear:both;"></div><!-- 播放器 --><div class="music-player" id="player"><div class="col-lg-6" style="margin-bottom: 20px;float: none;width:100%;align:center"><div class="input-group"><input v-model="query" @keyup.enter="searchMusic" type="text" class="form-control" placeholder="查找歌曲"><span class="input-group-btn"><button class="btn btn-default" type="button" @click="searchMusic">搜索</button></span></div><!-- /input-group --></div><!-- /.col-lg-6 --><!-- audio标签 --><audio ref="audio" class="music-player__audio" :src="musicUrl" autoplay="autoplay"></audio><!-- 播放器主体 --><div class="music-player__main"><!-- 模糊背景 --><div class="music-player__blur" :style="{'backgroundImage':'url('+picUrl+')'}"></div><!-- 唱片 --><div class="music-player__disc"><!-- 唱片图片 --><div class="music-player__image"><img width="100%" :src="picUrl" alt=""></div><!-- 指针 --><div class="music-player__pointer" :class="play"><img width="100%" src="./images/cd_tou.png" alt=""></div></div><!-- 控件主体 --><div class="music-player__controls"><!-- 歌曲信息 --><div class="music__info"><h3 class="music__info--title" v-text="musicName"></h3><p class="music__info--singer" v-text="artist"></p></div><!-- 控件... --><div class="player-control"><div class="player-control__content"><div class="player-control__btns"><div class="player-control__btn player-control__btn--prev"><i class="iconfont icon-prev" @click="musicChange('pre')"></i></div><div class="player-control__btn player-control__btn--play"><i @click="musiccl" :class="pause"></i></div><div class="player-control__btn player-control__btn--next"><i class="iconfont icon-next" @click="musicChange('next')"></i></div><div class="player-control__btn player-control__btn--mode"><i class="iconfont icon-loop"></i></div></div><div class="player-control__volume"><div class="control__volume--icon player-control__btn"><i class="iconfont icon-volume"></i></div><div class="control__volume--progress progress"></div></div></div><!-- 歌曲播放进度 --><div class="player-control__content"><div class="player__song--progress progress"></div><div class="player__song--timeProgess nowTime">00:00</div><div class="player__song--timeProgess totalTime"><span v-text="totalTime"></span></div></div></div></div></div><!-- 歌曲列表 --><div class="music-player__list"><ul class="music__list_content"><li class="music__list__item" :class="playing" v-for="(item,index) in musicList" @click="playMusic(item.id,item.name,item.artists[0].name,index)"><span style="color:aliceblue;">{{ item.name }}</span> {{ item.artists[0].name }}</li></ul></div></div><script src="/npm/vue/dist/vue.js"></script><script src="/axios/dist/axios.min.js"></script><script src="js/main.js"></script></body></html>
五、Js 代码
var app = new Vue({el:"#player",data:{//查询关键字query:"",//歌曲数组musicList:[],//歌曲地址musicUrl:"",//歌曲播放图标切换pause:"iconfont icon-play",playing:"music__list__item",//歌曲名musicName:"...",//作者artist:"...",//图片路径picUrl:"",//指针状态play:"",//歌曲在数组中的位置musicIndex:0,totalTime:"00:00"},methods:{//歌曲搜索searchMusic:function(){var that=this;axios.get("/search?keywords="+this.query).then(function(response){that.musicList=response.data.result.songs;console.log(response)},function(err){})},//歌曲播放playMusic:function(musicId,musicname,artist,index){this.play="play";this.musicIndex=index;//获取点击歌曲url并播放var that=this;axios.get("/song/url?id="+musicId).then(function(response){that.musicUrl=response.data.data[0].url;that.pause="iconfont icon-pause";that.playing="music__list__item play";that.musicName=musicname;that.artist=artist;console.log(response)},function(err){})//获取时长totalMinute = parseInt(this.$refs.audio.duration / 60) < 10 ? "0" + parseInt(this.$refs.audio.duration / 60) : parseInt(this.$refs.audio.duration / 60);totalSecond = parseInt(this.$refs.audio.duration % 60) < 10 ? "0" + parseInt(this.$refs.audio.duration % 60) : parseInt(this.$refs.audio.duration % 60);this.totalTime = totalMinute +":"+ totalSecond;console.log(this.totalTime)//歌曲详情获取axios.get("/song/detail?ids="+musicId).then(function(response){console.log(response.data.songs[0].al.picUrl)that.picUrl=response.data.songs[0].al.picUrl;},function(err){})},//歌曲播放与暂停切换musiccl:function(){if(this.pause=="iconfont icon-pause"){this.$refs.audio.pause();this.pause="iconfont icon-play";this.play=""}else{this.$refs.audio.play();this.pause="iconfont icon-pause";this.play="play"}},//歌曲切换musicChange:function(changeid){index=this.musicIndex;if( index>=0 && index<=this.musicList.length){//上一首if(changeid=="pre" && index>0){musicId=this.musicList[index-1].id;musicname=this.musicList[index-1].name;artist=this.musicList[index-1].artists[0].name;this.playMusic(musicId,musicname,artist,index-1);}//下一首if(changeid=="next" && index<this.musicList.length){musicId=this.musicList[index+1].id;musicname=this.musicList[index+1].name;artist=this.musicList[index+1].artists[0].name;this.playMusic(musicId,musicname,artist,index+1);}}}}})
六、项目完整代码
完善后会上传GitHub
