项目功能展示
一、榜单部分
- 首页展示榜单包括榜单封面，名称
-
点击榜单封面进入榜单详细列表
image.png
二、榜单详细
- 进入榜单详细展示音乐标题，歌手，专辑，时长
- 点击音乐播放音乐，音乐标题高亮显示，播放栏显示音乐详情，包括音乐封面，歌名，歌手，总时长和当前播放时长
- 点击play键可以控制音乐的暂停和播放
- 点击上一首下一首可以在当前榜单进行切换，为循环榜单模式。（当前榜单播放音乐后，进入其他榜单未进行点击播放操作，这时点击上一曲和下一曲仍为原来的榜单）
-
可调节音量
image.png
image.png
三、歌曲详情
- 点击播放栏歌曲信息，进入歌曲详情，展示图片，歌名，歌手，歌词
- 当前唱到哪句词会高亮
-
不会滚动，需要手动滚动：）
image.png
项目难点分析
1. electron
- 使用electron-vue框架快速搭建好环境
2. 项目目录
-
component
image.png -
router，server
image.png
(api.js)
image.png -
store，util
image.png
vuex数据格式：
const state = {
musicQueue: [], //音乐播放列表
curListID: 0,//当前的榜单id
curIndx: 0, //当前播放第几首歌
songObj: null, //单曲对象
allTime: 0, //当前歌曲的总时长
curTime: 0,//当前播放的时间
curVolume: null ,//当前音量
lyricObject: null, //歌词对象
lyricIndx:0, //当前唱到第几句
isPlay: false //是否在播歌
}
歌曲播放部分
- 点击音乐进行播放
playMusic(item) {
let musicObj = {
listID: this.listID,
lists: this.musicListData,
nowID: this.musicListData.indexOf(item)
};
this.$store.commit("addMusicQueue", musicObj);
this.$store.dispatch("getUrl");
console.log(this.$store.state.Music.musicQueue);
}
// 初始化榜单列表队列
addMusicQueue(state, musicObj) {
let cloneMusicObj = JSON.parse(JSON.stringify(musicObj));
state.curListID = cloneMusicObj.listID;
state.musicQueue = cloneMusicObj.lists;
state.curIndx = cloneMusicObj.nowID;
state.allTime = state.musicQueue[state.curIndx].dt;
}
// 获取播放歌曲url
getUrl({ dispatch,commit, state }) {
if (state.musicQueue.length > 0) {
getMusicUrl((err,res)=>{
let curUrl = res.data.data[0].url;
commit('createSong', curUrl)
state.songObj.addEventListener('canplay', () => {
dispatch('play')
})
},state.musicQueue[state.curIndx].id)
}
}
createSong(state, url) {
console.log('一开始的');
if (state.songObj instanceof Audio) {
state.songObj.pause();
state.songObj = null;
}
state.songObj = new Audio(url)
},
- 点击play按钮也会触发
play({dispatch,commit, state}) {
console.log('按play键');
if (state.songObj.paused) {
console.log('play')
state.songObj.play();
commit('changeVolume'); //修改音量
dispatch('getCurTime'); //获取已经播的时长
dispatch('endToNext'); // 监听歌曲是否播完需要跳转下一首
dispatch('getIyric') //获取歌词
} else {
console.log('paused')
state.songObj.pause()
}
}
- 修改音量，监听拖动的change事件修改vuex的当前音量
changeVolume(state,val){
if(val){
console.log('当前拖动'+val)
state.curVolume = val/100;
}
if(state.curVolume!== null){
if (state.songObj instanceof Audio) {
state.songObj.volume= state.curVolume
console.log('当前音量'+state.songObj.volume)
}
}
},
- 获取当前播放时长
getCurTime({ commit, state}) {
console.log('getcurtime');
console.log(state.songObj)
if(state.songObj){
state.songObj.addEventListener('timeupdate',()=>{
commit('computeCurTime');
commit('getIyricIdx')
})
}
},
computeCurTime(state){
if(state.songObj.currentTime >= state.allTime){
state.curTime = state.allTime;
}
state.curTime = state.songObj.currentTime;
console.log('已经播放了'+ parseInt(state.curTime))
},
<div class="musicTime">{{ curtime|secondToDate }}/{{ musicQueue[curIndx].dt|millisecondToDate }}</div>
computed: {
musicQueue() {
return this.$store.state.Music.musicQueue;
},
curIndx() {
return this.$store.state.Music.curIndx;
},
curtime() {
return this.$store.state.Music.curTime;
},
}
- 点击上一首，下一首
// method
pre() {
this.$store.commit("pre");
this.$store.dispatch("getUrl");
},
next() {
this.$store.commit("next");
this.$store.dispatch("getUrl");
},
// mutation
pre(state){
console.log('点击上一首当前是'+state.curIndx);
if (state.musicQueue.length == 0 || state.curIndx == 0){
return
} else{
state.curIndx--;
}
},
next(state){
if (state.musicQueue.length == 0 ) return
if(state.curIndx == state.musicQueue.length - 1){
state.curIndx=0;
} else{
state.curIndx++
}
}
- 监听歌曲是否播完需要跳转下一首
endToNext({ dispatch,commit, state}) {
state.songObj.addEventListener('ended',()=>{
commit('next');
dispatch('getUrl')
})
}
歌词部分
- 上面的音乐play的时候会获取歌词
getIyric({commit,state}){
getMusicIyric((err,res)=>{
console.log('获取歌词')
console.log(res.data.lrc.lyric)
var lyricObj = parseLyric(res.data.lrc.lyric);
var line = 0;
for (var i in lyricObj) {
lyricObj[i].line = line++;
}
commit('createIyricObj',lyricObj)
},state.musicQueue[state.curIndx].id)
}
image.png
createIyricObj(state,lyricObj){
state.lyricObject = lyricObj;
console.log(state.lyricObject)
}
- 当前播放时长有变化的时候找出当前在唱哪句
getCurTime({ commit, state}) {
console.log('getcurtime');
console.log(state.songObj)
if(state.songObj){
state.songObj.addEventListener('timeupdate',()=>{
commit('computeCurTime');
commit('getIyricIdx')
})
}
}
getIyricIdx(state) {
let curTimeInt = parseInt(state.curTime);
if (state.lyricObject[curTimeInt]) {
state.lyricIndx = state.lyricObject[curTimeInt].line;
}
}
<div class="wordScrollBox">
<el-scrollbar ref="srollBox">
<p
v-for="(value,key,index) in lyricObj"
:key="index"
:class="{'highLight':index==lyricIndx?true:false}"
>{{value.text}}</p>
</el-scrollbar>
</div>
其他
打包
npm install -g electron-packager
