vue一個頁面實現(xiàn)音樂播放器的示例
本文介紹了vue一個頁面實現(xiàn)音樂播放器的示例，分享給大家，具體如下：
效果如下：
項目地址：https://github.com/ermu592275254/MiniMusicPlayer
演示地址： https://ermu592275254.github.io/MiniMusicPlayer/(歌曲鏈接已失效)
開發(fā)前構思
界面
做音樂播放器，界面一定要炫酷。太low了聽歌沒感覺。本身是為了在上班的時候用，于是做成了一個類似網易云音樂的界面，大小合適。不用兼容手機端。
用css做圖標
本懷著簡單實用的需求去考慮，圖標可用SVG、url或者css。相對于url，SVG和css更好一些。為了修煉，最終選擇的css。利用好after和before，能減少很多dom嵌套。
.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本身的樣式很難看，并且不同的瀏覽器呈現(xiàn)出來的效果也不一樣。當然你可以修改audio的樣式，傳統(tǒng)的做法是通過controls屬性來隱藏audio，然后用div來代替?，F(xiàn)在是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" :style="`background-image:url(${currentSong.album_logo})`"></div>
歌曲資源
爬下接口
直接去蝦米官網打開network,將url復制到postman里面去做請求。通過修改headers發(fā)現(xiàn)，會校驗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發(fā)起請求，再將請求轉發(fā)到頁面。無意中寫了一個代理。
...
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;
...
歌詞滾動
作為一款逼格比較高的播放器，歌詞滾動是必須的。
原理
將每一句歌詞保存為一個對象，有對應的時間。當歌曲播放的當前時長大于或等于歌詞的時間，小于此歌詞的下一句歌詞的時間，那么就將此歌詞滾動到可視區(qū)域。并且修改字體顏色。
格式化歌詞
接口返回的歌詞一臉懵逼，仔細研究一下，發(fā)現(xiàn)是有規(guī)律的。
[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;
},
搜索欄實現(xiàn)
同文件下子組件掛載
為了遵循模塊化開發(fā)，決定將搜索欄寫成一個子組件。在同一頁面下寫子組件，子組件掛載到對應的template就有講究了。此template不能被父組件的掛載元素包含，否則父組件渲染時會因為無法渲染子組件中的數(shù)據(jù)而報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解決數(shù)據(jù)傳輸
通過jsonp去請求數(shù)據(jù)，需要設置一個callback函數(shù)，此callback寫成一個全局函數(shù)，如果不這樣寫，而是通過 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儲存歌曲信息
下次再打開，應該播放列表應該保留上一次的數(shù)據(jù)，這個可直接用localstrong實現(xiàn)
踩了坑
prop傳遞數(shù)據(jù)
使用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>
待優(yōu)化
手動修改進度，偶爾會不生效。
搜索暫不支持分頁
不支持建歌單
背景顏色與進度條顏色相近需修改進度條顏色
不支持播放模式選擇-單曲循環(huán)-隨機播放
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
計算屬性就是模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。這篇文章主要介紹了vue計算屬性詳解,需要的朋友可以參考下2018-04-04
使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
頁面中會有很多時候需要彈窗提示,下面這篇文章主要給大家介紹了關于Vue設置提示和警告彈出框的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
vue移動端監(jiān)聽滾動條高度的實現(xiàn)方法
今天小編就為大家分享一篇vue移動端監(jiān)聽滾動條高度的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何使用模擬的json數(shù)據(jù)查看效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
使用vue實現(xiàn)多規(guī)格選擇實例（SKU）
這篇文章主要介紹了使用vue實現(xiàn)多規(guī)格選擇實例（SKU），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
本文主要介紹了vue請求接口并且攜帶token的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了使用vue實現(xiàn)自定義多選與單選的答題功能,vue組件中在表單方面提供了一個v-model指令，非常好用，具體實現(xiàn)過程大家跟隨腳本之家小編一起看看吧2018-07-07
文章介紹了如何在Vue3+Ts項目中使用json-editor-vue3插件,并解決了導入過程中遇到的模塊識別問題,通過步驟說明和代碼示例,展示了如何在項目中成功引入和使用該插件,并提供了一些常見參數(shù)和事件說明2025-01-01
下面小編就為大家?guī)硪黄猇ue-resource攔截器判斷token失效跳轉的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10