国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue——一個頁面實現(xiàn)音樂播放器

Java3y / 1263人閱讀

摘要:用做進(jìn)度條本身的樣式很難看,并且不同的瀏覽器呈現(xiàn)出來的效果也不一樣。背景濾鏡模糊將圖片設(shè)置為背景的感覺很棒,可以說整個播放器的顏值這背景提供了一半。正確寫法錯誤寫法待優(yōu)化手動修改進(jìn)度,偶爾會不生效。


請忽略下面這段文字
年關(guān)將至,時間好歹又多出了些許。卻不敢過度消遣。歲月未曾饒過我,我亦不想饒過歲月。且將它塞得膨脹,讓這一年看似加更充實。
不曾料想我一個愛些風(fēng)花雪月、研墨行歌之人,卻做起了碼農(nóng)這一行當(dāng)。雖做了碼農(nóng),卻斷不了嗜好,日日必聽歌。奈何近日,公司限制高流量網(wǎng)絡(luò)訪問。蝦米、網(wǎng)易云、QQ甚至酷狗,無一幸免。
沒有了歌,變得像挨了錘的牛一樣,疲軟成一灘爛泥。
所幸還能用用listen 1,可這listen 1卻讓人味同嚼蠟。歌且無過,想是這界面不合胃口。做一名前端,也沾了對外觀挑三檢四的毛病。
于是靈光一閃,便想造一個出來。


項目地址:https://github.com/ermu592275...
演示地址:https://ermu592275254.github....(因referer限制,無法搜索歌曲)

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

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

用css做圖標(biāo)

本懷著簡單實用的需求去考慮,圖標(biāo)可用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;
}
畫一個唱片

網(wǎng)易云的唱片很好看,我也要弄一個唱片!
用好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做進(jìn)度條

audio本身的樣式很難看,并且不同的瀏覽器呈現(xiàn)出來的效果也不一樣。當(dāng)然你可以修改audio的樣式,傳統(tǒng)的做法是通過controls屬性來隱藏audio,然后用div來代替。現(xiàn)在是html5時代了,當(dā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è)置為背景的感覺很棒,可以說整個播放器的顏值這背景提供了一半。設(shè)置也非常簡單,用到了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控制。

 
歌曲資源 爬下接口

直接去蝦米官網(wǎng)打開network,將url復(fù)制到postman里面去做請求。通過修改headers發(fā)現(xiàn),會校驗Referer。也就是說只有蝦米允許的域名可以訪問此接口。
http://api.xiami.com/web?v=2....

解決跨域問題

因為接口支持jsonp。起初嘗試將chrome瀏覽器設(shè)置跨域,然后通過$.ajax去做一個jsonp的請求。可以正常訪問。
之后突然不行了,是不是蝦米做了限制?
遂改用node啟動一個服務(wù),去偽造referer發(fā)起請求,再將請求轉(zhuǎn)發(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;
...
歌詞滾動

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

原理

將每一句歌詞保存為一個對象,有對應(yīng)的時間。當(dāng)歌曲播放的當(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]一直獨斷專權(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("
");
    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 + "
" + translate[i];
    }
    this.currentLyrics = lyricsArr;
},
搜索欄實現(xiàn) 同文件下子組件掛載

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

...
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ù),需要設(shè)置一個callback函數(shù),此callback寫成一個全局函數(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儲存歌曲信息

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

技術(shù)補(bǔ)充

濾鏡模糊 http://www.zhangxinxu.com/wor...
css圖標(biāo) http://www.uiplayground.in/cs...
flex 兼容寫法: https://www.cnblogs.com/irisz...
flex 布局教程 http://www.ruanyifeng.com/blo...
滑動條樣式自定義 http://blog.csdn.net/u0133472...
隱藏滾動條兼容 https://segmentfault.com/q/10...
audio屬性 https://developer.mozilla.org...
audio事件 https://developer.mozilla.org...

踩了坑 prop傳遞數(shù)據(jù)

使用cdn,vue的prop只支持中線格式,駝峰格式不生效
ps: 在用webpack打包的項目中用駝峰是可以,在打包過程中,會做處理。

// 正確寫法

// 錯誤寫法
待優(yōu)化

手動修改進(jìn)度,偶爾會不生效。
搜索暫不支持分頁
不支持建歌單
背景顏色與進(jìn)度條顏色相近需修改進(jìn)度條顏色
不支持播放模式選擇-單曲循環(huán)-隨機(jī)播放

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51726.html

相關(guān)文章

  • Vue 實現(xiàn)網(wǎng)易云音樂 WebApp

    摘要:基于等開發(fā)一款移動端音樂,界面參考了安卓版的網(wǎng)易云音樂布局適配常見移動端。圖標(biāo)使用阿里巴巴圖標(biāo)庫,中間的唱片旋轉(zhuǎn)動畫使用了實現(xiàn)。搜索功能實現(xiàn)功能搜索歌手歌單歌曲熱門搜索數(shù)據(jù)節(jié)流上拉刷新保存搜索記錄。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發(fā)一款移動端音樂 WebApp,UI ...

    Karuru 評論0 收藏0
  • vue.js 移動端音樂app(一) 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實現(xiàn) (1)功能 對 better-scroll 插件的基本封裝,實現(xiàn)移動端的滾動 (2)實現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項之一 (1)取值: 1 滾動的時候會派發(fā) scroll 事件,會截流。 2 滾動的時候?qū)崟r派發(fā) scroll 事件,不會截流。 3 除了實時派發(fā) scroll 事件,在 swipe 的情況...

    wqj97 評論0 收藏0
  • vue.js 移動端音樂app(一) 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實現(xiàn) (1)功能 對 better-scroll 插件的基本封裝,實現(xiàn)移動端的滾動 (2)實現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項之一 (1)取值: 1 滾動的時候會派發(fā) scroll 事件,會截流。 2 滾動的時候?qū)崟r派發(fā) scroll 事件,不會截流。 3 除了實時派發(fā) scroll 事件,在 swipe 的情況...

    FingerLiu 評論0 收藏0
  • vue.js 移動端音樂app(一) 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實現(xiàn) (1)功能 對 better-scroll 插件的基本封裝,實現(xiàn)移動端的滾動 (2)實現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項之一 (1)取值: 1 滾動的時候會派發(fā) scroll 事件,會截流。 2 滾動的時候?qū)崟r派發(fā) scroll 事件,不會截流。 3 除了實時派發(fā) scroll 事件,在 swipe 的情況...

    MadPecker 評論0 收藏0
  • ?基于H5+js開發(fā)一款音樂放器

    前言:當(dāng)下音樂播放器不勝其數(shù),為了更好的掌握一些東西,我們來自己制作一個音樂播放器。 文章目錄: 一.開發(fā)環(huán)境:二.頁面視圖:1.主文件入口(首頁):2.音樂播放界面: 三.功能實現(xiàn)(1)、index.html:(2)、播放音樂(music.html):(3)、樣式文件(index.css): 四.項目地址: 一.開發(fā)環(huán)境: 開發(fā)工具:HbuliderX; 框架:Vant,Mui,V...

    BearyChat 評論0 收藏0

發(fā)表評論

0條評論

Java3y

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<