項目功能展示
一码党、榜單部分
- 首頁展示榜單包括榜單封面稠肘，名稱
-
點擊榜單封面進入榜單詳細列表
image.png
二、榜單詳細
- 進入榜單詳細展示音樂標題荔睹，歌手狸演，專輯，時長
- 點擊音樂播放音樂棍弄，音樂標題高亮顯示目派，播放欄顯示音樂詳情岔留，包括音樂封面，歌名满哪，歌手婿斥，總時長和當前播放時長
- 點擊play鍵可以控制音樂的暫停和播放
- 點擊上一首下一首可以在當前榜單進行切換，為循環(huán)榜單模式哨鸭。（當前榜單播放音樂后民宿，進入其他榜單未進行點擊播放操作，這時點擊上一曲和下一曲仍為原來的榜單）
-
可調(diào)節(jié)音量
image.png
image.png
三像鸡、歌曲詳情
- 點擊播放欄歌曲信息活鹰，進入歌曲詳情，展示圖片只估，歌名志群，歌手，歌詞
- 當前唱到哪句詞會高亮
-
不會滾動蛔钙，需要手動滾動：）
image.png
項目難點分析
1. electron
- 使用electron-vue框架快速搭建好環(huán)境
2. 項目目錄
-
component
image.png -
router赖舟，server
image.png
(api.js)
image.png -
store，util
image.png
vuex數(shù)據(jù)格式：
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按鈕也會觸發(fā)
play({dispatch,commit, state}) {
console.log('按play鍵');
if (state.songObj.paused) {
console.log('play')
state.songObj.play();
commit('changeVolume'); //修改音量
dispatch('getCurTime'); //獲取已經(jīng)播的時長
dispatch('endToNext'); // 監(jiān)聽歌曲是否播完需要跳轉(zhuǎn)下一首
dispatch('getIyric') //獲取歌詞
} else {
console.log('paused')
state.songObj.pause()
}
}
- 修改音量夸楣，監(jiān)聽拖動的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('已經(jīng)播放了'+ 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++
}
}
- 監(jiān)聽歌曲是否播完需要跳轉(zhuǎn)下一首
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
