使用vue怎么在頁面中實現一個音樂播放器

這期內容當中小編將會給大家帶來有關使用vue怎么在頁面中實現一個音樂播放器，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

用css做圖標

.next {
  position: relative;
  display: inline-block;
  height: 36px;
  width: 36px;
  border: 2px solid #fff;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}
    
.next:before {
  content: '';
  height: 0;
  width: 0;
  display: block;
  border: 10px transparent solid;
  border-right-width: 0;
  border-left-color: #fff;
  position: absolute;
  top: 8px;
  left: 10px;
}

.next:after {
  content: '';
  height: 20px;
  width: 4px;
  display: block;
  background: #fff;
  position: absolute;
  top: 8px;
  left: 22px;
}

畫一個唱片

網易云的唱片很好看，我也要弄一個唱片! 用好 box-shadow ，一個元素便可以做成很好看的唱片效果。

.disc {
  position: relative;
  margin-top: 10%;
  margin-left: 10%;
  width: 300px;
  height: 300px;
  border-radius: 300px;
  transform: rotate(45deg);
  background-image: radial-gradient(5em 30em ellipse, #fff, #000);
  border: 2px solid #131313;
  box-shadow: 0 0 0 10px #343935;
  opacity: 0.7;
}

用range做進度條

audio本身的樣式很難看，并且不同的瀏覽器呈現出來的效果也不一樣。當然你可以修改audio的樣式，傳統的做法是通過controls屬性來隱藏audio，然后用div來代替。現在是html5時代了，當然要用更符合場景的新元素————range。

input[type=range] {
  -webkit-appearance: none;
  width: 80%;
  height: 8px;
  border-radius: 10px;
  background-color: #fff;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
} 
input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 20px;
}
input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -3px;
  height: 14px;
  width: 14px;
  background: #eb7470;
  border-radius: 50%;
  border: solid 3px #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

背景濾鏡模糊

將圖片設置為背景的感覺很棒，可以說整個播放器的顏值這背景提供了一半。設置也非常簡單，用到了css3的濾鏡。

.bg-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(20px);
  z-index: -1;
}

背景圖片通過js控制。

<div class="bg-blur" :></div>

歌曲資源

爬下接口

直接去蝦米官網打開network,將url復制到postman里面去做請求。通過修改headers發現，會校驗Referer。也就是說只有蝦米允許的域名可以訪問此接口。 http://api.xiami.com/web?v=2.0&app_key=1&key=aliez&page=1&limit=5&callback=jsonp154&r=search/songs

解決跨域問題

因為接口支持jsonp。起初嘗試將chrome瀏覽器設置跨域，然后通過$.ajax去做一個jsonp的請求。可以正常訪問。

之后突然不行了，是不是蝦米做了限制?

遂改用node啟動一個服務，去偽造referer發起請求，再將請求轉發到頁面。無意中寫了一個代理。

...
case '/song':
  let songOptions = {
    url: 'http://api.xiami.com/web?'+ urlArr[1],
    headers: {
      'Referer': 'http://m.xiami.com/'
    }
  };
  function callback1(error, response, body) {
    if (!error && response.statusCode == 200) {
      res.end(body);
    }
  }
  request(songOptions, callback1);
  break;
...

歌詞滾動

作為一款逼格比較高的播放器，歌詞滾動是必須的。

原理

將每一句歌詞保存為一個對象，有對應的時間。當歌曲播放的當前時長大于或等于歌詞的時間，小于此歌詞的下一句歌詞的時間，那么就將此歌詞滾動到可視區域。并且修改字體顏色。

格式化歌詞

接口返回的歌詞一臉懵逼，仔細研究一下，發現是有規律的。

[ti:aLIEz]
[ar:SawanoHiroyuki[nZk]:mizuki]
[al:o1]
[ly:澤野弘之]
[mu:澤野弘之]
[ma:]
[pu:]
[by:ttpod]
[total:268512]
[offset:0]
[00:00.000]<195>aLIEz <199>- <451>SawanoHiroyuki[nZk]:mizuki
[x-trans]徹頭徹尾的謊言 - SawanoHiroyuki[nZk]:mizuki
[00:01.095]<201>作<250>詞<200>：<201>澤<200>野<199>弘<300>之
[x-trans]
[00:02.846]<200>作<150>曲<150>：<200>澤<200>野<351>弘<349>之
[x-trans]
[00:20.828]<200>決<250>め<200>つ<201>け<149>ば<201>か<349>り
[x-trans]一直獨斷專權
[00:23.279]<200>自<200>惚<200>れ<200>を<200>著<400>た
[x-trans]總是自負逞強
[00:24.979]<200>チ<200>ー<200>プ<450>な<550>hokori<350>で
[x-trans]明明只是一文不值的驕傲
......
  refactoringLyrics(lyric){
  let text = lyric.split('[offset:0]')[1];
  let textArr = text.split('\n');
  let lyricsArr = [], translate = [];
  textArr.forEach((item, index) => {
    let time = 0, text = '';
    if (item.indexOf('[x-trans]') > -1) {
      translate.push(item.split('[x-trans]')[1])
    } else if (item.trim() != '') {
      time = item.slice(1, 6).split(':');
      time = parseInt(time[0]) * 60 + parseInt(time[1]);
      text = item.slice(11);
      let arr = text.split('>');
      let str = arr.reduce((a, b) => {
        return a.split('<')[0] + b.split('<')[0]
      });
      let obj = {
        time: time,
        text: str
      };
      lyricsArr.push(obj);
    }
  });
  for (let i in translate) {
    lyricsArr[i].text = lyricsArr[i].text + '\n' + translate[i];
  }
  this.currentLyrics = lyricsArr;
},

搜索欄實現

同文件下子組件掛載

為了遵循模塊化開發，決定將搜索欄寫成一個子組件。在同一頁面下寫子組件，子組件掛載到對應的template就有講究了。此template不能被父組件的掛載元素包含，否則父組件渲染時會因為無法渲染子組件中的數據而報undefined。

<div id="app" class="main">
...
</div>
<template id="search-box">
...
</template>

var searchBox = {
    template: '#search-box',
    props: {
      isShow: Boolean,
      openFun: Function
    },
    data(){
      return {
        resultList: [],
        searchValue: '',
      }
    },
    methods: {
    }
  };
 new Vue({
  el: '#app',
  components: {
    'com-tip': tip,
    'search-box': searchBox
  },
  ...
})

eventBus解決數據傳輸

通過jsonp去請求數據，需要設置一個callback函數，此callback寫成一個全局函數，如果不這樣寫，而是通過 searchBox.methods.callback的形式，this指向將為methods。而無法直接給searchBox的data賦值。 于是通過eventBus來處理，這樣更易維護。

var EventBus = new Vue();
var callBack = function(result) {
  console.log(result);
  EventBus.$emit('callBack', result);
};
...
mounted(){
  let self = this;
  EventBus.$on('callBack', function(res) {
    if (res && res.data) {
      self.resultList = res.data.songs;
    }
  })
}
...

localStrong儲存歌曲信息

下次再打開，應該播放列表應該保留上一次的數據，這個可直接用localstrong實現

踩了坑

prop傳遞數據

使用cdn，vue的prop只支持中線格式，駝峰格式不生效

ps: 在用webpack打包的項目中用駝峰是可以，在打包過程中，會做處理。

// 正確寫法
<search-box :is-show="showSearch" :open-fun="openSearch" @push-song="pushNewSong"
        @play-song="playSong"></search-box>
// 錯誤寫法
<search-box :isShow="showSearch" :openFun="openSearch" @pushSong="pushNewSong"
        @playSong="playSong"></search-box>

上述就是小編為大家分享的使用vue怎么在頁面中實現一個音樂播放器了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。