點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識(shí)百科 - 正文

JS實(shí)現(xiàn)音樂播放器界面

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:58:27

JS實(shí)現(xiàn)音樂播放器界面

JS實(shí)現(xiàn)音樂播放器界面:這次給大家?guī)鞪S實(shí)現(xiàn)音樂播放器界面，JS實(shí)現(xiàn)音樂播放器界面的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。本文介紹了vue一個(gè)頁面實(shí)現(xiàn)音樂播放器的示例，分享給大家，具體如下：效果如下：項(xiàng)目地址：https://github.com/ermu592275254/Mi

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS實(shí)現(xiàn)音樂播放器界面:這次給大家?guī)鞪S實(shí)現(xiàn)音樂播放器界面，JS實(shí)現(xiàn)音樂播放器界面的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。本文介紹了vue一個(gè)頁面實(shí)現(xiàn)音樂播放器的示例，分享給大家，具體如下：效果如下：項(xiàng)目地址：https://github.com/ermu592275254/Mi

這次給大家?guī)鞪S實(shí)現(xiàn)音樂播放器界面，JS實(shí)現(xiàn)音樂播放器界面的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

本文介紹了vue一個(gè)頁面實(shí)現(xiàn)音樂播放器的示例，分享給大家，具體如下：

效果如下：

項(xiàng)目地址：https://github.com/ermu592275254/MiniMusicPlayer

演示地址： https://ermu592275254.github.io/MiniMusicPlayer/(歌曲鏈接已失效)

開發(fā)前構(gòu)思

界面

做音樂播放器，界面一定要炫酷。太low了聽歌沒感覺。本身是為了在上班的時(shí)候用，于是做成了一個(gè)類似網(wǎng)易云音樂的界面，大小合適。不用兼容手機(jī)端。

用css做圖標(biāo)

本懷著簡(jiǎn)單實(shí)用的需求去考慮，圖標(biāo)可用SVG、url或者css。相對(duì)于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;
}

畫一個(gè)唱片

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

.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做進(jìn)度條

audio本身的樣式很難看，并且不同的瀏覽器呈現(xiàn)出來的效果也不一樣。當(dāng)然你可以修改audio的樣式，傳統(tǒng)的做法是通過controls屬性來隱藏audio，然后用p來代替?，F(xiàn)在是html5時(shí)代了，當(dāng)然要用更符合場(chǎng)景的新元素————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);
}

背景濾鏡模糊

將圖片設(shè)置為背景的感覺很棒，可以說整個(gè)播放器的顏值這背景提供了一半。設(shè)置也非常簡(jiǎn)單，用到了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控制。

<p class="bg-blur" :style="`background-image:url(${currentSong.album_logo})`"></p>

歌曲資源

爬下接口

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

解決跨域問題

因?yàn)榻涌谥С謏sonp。起初嘗試將chrome瀏覽器設(shè)置跨域，然后通過$.ajax去做一個(gè)jsonp的請(qǐng)求?？梢哉ＴL問。

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

遂改用node啟動(dòng)一個(gè)服務(wù)，去偽造referer發(fā)起請(qǐng)求，再將請(qǐng)求轉(zhuǎn)發(fā)到頁面。無意中寫了一個(gè)代理。

...
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;
...

歌詞滾動(dòng)

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

原理

將每一句歌詞保存為一個(gè)對(duì)象，有對(duì)應(yīng)的時(shí)間。當(dāng)歌曲播放的當(dāng)前時(shí)長(zhǎng)大于或等于歌詞的時(shí)間，小于此歌詞的下一句歌詞的時(shí)間，那么就將此歌詞滾動(dòng)到可視區(qū)域。并且修改字體顏色。

格式化歌詞

接口返回的歌詞一臉懵逼，仔細(xì)研究一下，發(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]一直獨(dú)斷專權(quán)
[00:23.279]<200>自<200>惚<200>れ<200>を<200>著<400>た
[x-trans]總是自負(fù)逞強(qiáng)
[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;
},

搜索欄實(shí)現(xiàn)

同文件下子組件掛載

為了遵循模塊化開發(fā)，決定將搜索欄寫成一個(gè)子組件。在同一頁面下寫子組件，子組件掛載到對(duì)應(yīng)的template就有講究了。此template不能被父組件的掛載元素包含，否則父組件渲染時(shí)會(huì)因?yàn)闊o法渲染子組件中的數(shù)據(jù)而報(bào)undefined。

<p id="app" class="main">
...
</p>
<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去請(qǐng)求數(shù)據(jù)，需要設(shè)置一個(gè)callback函數(shù)，此callback寫成一個(gè)全局函數(shù)，如果不這樣寫，而是通過 searchBox.methods.callback的形式，this指向?qū)閙ethods。而無法直接給searchBox的data賦值。于是通過eventBus來處理，這樣更易維護(hù)。

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儲(chǔ)存歌曲信息

下次再打開，應(yīng)該播放列表應(yīng)該保留上一次的數(shù)據(jù)，這個(gè)可直接用localstrong實(shí)現(xiàn)

踩了坑

prop傳遞數(shù)據(jù)

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

ps: 在用webpack打包的項(xiàng)目中用駝峰是可以，在打包過程中，會(huì)做處理。

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

待優(yōu)化

手動(dòng)修改進(jìn)度，偶爾會(huì)不生效。

搜索暫不支持分頁

不支持建歌單

背景顏色與進(jìn)度條顏色相近需修改進(jìn)度條顏色

不支持播放模式選擇-單曲循環(huán)-隨機(jī)播放

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！