讓工作與音樂(lè)（Vue）相伴

jemygraw 發(fā)布于2019-08-23 10:28 / 3235人閱讀

摘要：前言最近在自學(xué)打算自己仿一個(gè)項(xiàng)目來(lái)實(shí)戰(zhàn)一下，由于本人很喜歡聽(tīng)歌，所以就選擇了網(wǎng)易云音樂(lè)，在這與大家分享一下自己所遇到的問(wèn)題，其中也有些不足之處也希望大家提一些寶貴的意見(jiàn)，互相學(xué)習(xí)，一起進(jìn)步。

前言

最近在自學(xué)vue,打算自己仿一個(gè)項(xiàng)目來(lái)實(shí)戰(zhàn)一下，由于本人很喜歡聽(tīng)歌，所以就選擇了網(wǎng)易云音樂(lè)，在這與大家分享一下自己所遇到的問(wèn)題，其中也有些不足之處也希望大家提一些寶貴的意見(jiàn)，互相學(xué)習(xí)，一起進(jìn)步。

關(guān)于項(xiàng)目使用的技術(shù)棧

Vue：采用Vue的語(yǔ)法

Vuex：實(shí)現(xiàn)不同組件之間的狀態(tài)共享

vue-router：?jiǎn)雾?yè)應(yīng)用路由管理必備

axios：發(fā)起http請(qǐng)求

SASS(SCSS)：css預(yù)處理語(yǔ)言

項(xiàng)目

由于時(shí)間有限，只是做了個(gè)頁(yè)面的播放功能，其中用到了網(wǎng)易云音樂(lè)的API網(wǎng)易云，有興趣的可以去玩玩，其中也涉及到了一些知識(shí)點(diǎn)，在這與大家分享一下。

上圖

整個(gè)效果：
)

分享做這個(gè)單頁(yè)面的過(guò)程

這就是一個(gè)header組件，一個(gè)footer組件，一個(gè)musicList組件和一個(gè)paly組件組成的單頁(yè)面。

1. 如何獲取音樂(lè)的數(shù)據(jù)

我這是從網(wǎng)易云音樂(lè)api扒出來(lái)的，扒出來(lái)之后新建一個(gè)文件，把數(shù)據(jù)放進(jìn)去，之后通過(guò)axios獲取，部分代碼如下：

actions: {
    getData({ commit,state }) {
      if (localStorage.musics !== "[]" && localStorage.musics) {
        state.musicData = JSON.parse(localStorage.musics);
        return;
      }
      return new Promise((resolve, reject) => {
        Vue.axios.get("music-data")
            .then (res => {
              if (res.data.error === 0) {
                state.musicData = res.data.musicData;
                localStorage.musics = JSON.stringify(state.musicData);
              }
            })
            .then(() => {
              commit("toggleMusic",0)
            });
        resolve();
      });
    }
  }

2. 刪除功能

我是在這刪除這個(gè)圖標(biāo)下綁定了一個(gè)事件，主要就二句代碼:


在methods定義del事件就好了
        del(index){
            this.$store.commit("del",index);
        }

3. 尾部的播放控制

尾部的播放功能我一開(kāi)始遇到了一個(gè)難題就是如何獲取歌曲的時(shí)間和控制播放的進(jìn)度。后來(lái)通過(guò)查找資料和百度解決了

獲取歌曲時(shí)間的部分代碼如下：

 {{transformTime(now)}}
 js部分代碼
  this.nativeAudio = document.querySelector("audio");
    this.nativeAudio.addEventListener("play", () => {
      this.totalTime = this.transformTime(this.nativeAudio.duration);
      this.now = this.nativeAudio.currentTime;
      setInterval(() => {
        this.now = this.nativeAudio.currentTime;
      }, 1000)
    })
    
    transformTime(seconds) {
      let m, s;
      m = Math.floor(seconds / 60);
      m = m.toString().length == 1 ? ("0" + m) : m;
      s = Math.floor(seconds - 60 * m);
      s = s.toString().length == 1 ? ("0" + s) : s;
      return m + ":" + s;
    }

控制播放進(jìn)度的部分代碼如下

changeTime(event) {
      let progressBar = this.$refs.progressBar;
      let coordStart = progressBar.getBoundingClientRect().left;  //getBoundingClientRect()方法返回元素的大小及其相對(duì)于視口的位置
      let coordEnd = event.pageX;
      this.nativeAudio.currentTime = (coordEnd - coordStart) / progressBar.offsetWidth * this.nativeAudio.duration;
      this.now = this.nativeAudio.currentTime;
      this.nativeAudio.play();
      this.$store.commit("play", true);
    },
touchMove(event) {
      let progressBar = this.$refs.progressBar;
      let coordStart = progressBar.getBoundingClientRect().left;
      let coordEnd = event.touches[0].pageX;
      this.$refs.now.style.width = ((coordEnd - coordStart) / progressBar.offsetWidth).toFixed(3) * 100 + "%";  //toFixed(3)保留小數(shù)點(diǎn)后3位
    },
touchEnd(event) {
      this.nativeAudio.currentTime = this.$refs.now.style.width.replace("%", "")/100 * this.nativeAudio.duration;
      this.now = this.nativeAudio.currentTime;
      this.nativeAudio.play();
      this.$store.commit("play", true);
    },

4. 換膚

換膚主要提供了四種顏色，紅色藍(lán)色黑色和綠色，樣式使用的是flex布局，主要css代碼如下：

.skin {
        position: absolute;
        display: flex;
        flex-direction: column;
        bottom: 50px;
        right: 15px;
        width: 30px;
        .skin-colors {
          flex: 4;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .selected {
            border: 1px solid white;
          }
          i {
            flex: 1;
            display: inline-block;
            width: 20px;
            height: 20px;
            cursor: pointer;
            border-radius: 10px;
            margin-bottom: 5px;
          }
          i.one {
            background-color: #B72712;
          }
          i.two {
            background-color: #1565C0;
          }
          i.three {
            background-color: #212121;
          }
          i.four {
            background-color: #1B5E20;
          }
        }
        .icon-skin {
          flex: 1;
          width: 100%;
          height: 30px;
          background-repeat: no-repeat;
          background-size: contain;
          margin-top: 3px;
          cursor: pointer;
        }
        .icon-skin-red {
          background-image: url("./skinRed.svg");
        }
        .icon-skin-green {
          background-image: url("./skinGreen.svg");
        }
        .icon-skin-blue {
          background-image: url("./skinBlue.svg");
        }
        .icon-skin-black {
          background-image: url("./skinBlack.svg");
        }

5. 控制歌曲的上一首下一首的播放

部分代碼如下：

    prev() {
      this.audio.index = this.audio.index === 0 ? this.musicData.length - 1 : (--this.audio.index);
      this.$store.commit("toggleMusic", this.audio.index);
    }
    
    next() {
      this.audio.index = this.audio.index === this.musicData.length - 1 ? 0 : (++this.audio.index);
      this.$store.commit("toggleMusic", this.audio.index);
    }

總結(jié)：通過(guò)模仿這個(gè)項(xiàng)目更加清楚地了解各組件之前的使用和不同組件的狀態(tài)共享。當(dāng)然也遇到了一些坑，文章寫(xiě)到這里，也沒(méi)有完全寫(xiě)完，只寫(xiě)了一個(gè)單頁(yè)面，但也算是一個(gè)小小的總結(jié)，接下來(lái)附上我的源碼：項(xiàng)目源碼，有興趣的朋友可以看看順便幫忙點(diǎn)個(gè)star和fork,也希望能幫助到一些朋友。作為一名快要成為大四的學(xué)生，時(shí)間真的寶貴，對(duì)待學(xué)習(xí)也不敢懈怠，如果大家有什么好的想法的話(huà)可以聯(lián)系我的qq:137032979.碼字不容易，希望大家點(diǎn)個(gè)贊。前端路漫漫，與君共勉之。