实习答辩

项目功能展示

一、榜单部分

1. 首页展示榜单包括榜单封面，名称

2. 点击榜单封面进入榜单详细列表

   
   image.png

二、榜单详细

1. 进入榜单详细展示音乐标题，歌手，专辑，时长
2. 点击音乐播放音乐，音乐标题高亮显示，播放栏显示音乐详情，包括音乐封面，歌名，歌手，总时长和当前播放时长
3. 点击play键可以控制音乐的暂停和播放
4. 点击上一首下一首可以在当前榜单进行切换，为循环榜单模式。（当前榜单播放音乐后，进入其他榜单未进行点击播放操作，这时点击上一曲和下一曲仍为原来的榜单）
5. 可调节音量
   image.png
   image.png

三、歌曲详情

1. 点击播放栏歌曲信息，进入歌曲详情，展示图片，歌名，歌手，歌词
2. 当前唱到哪句词会高亮

3. 不会滚动，需要手动滚动：）

   
   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