資訊專欄INFORMATION COLUMN
摘要：歡迎吐槽功能思路分析用了這么多年的音樂播放軟件，目前已是網(wǎng)易云音樂的重度用戶。一個(gè)基本的音樂播放器基礎(chǔ)功能有播放暫停歌曲切換。用媒體查詢實(shí)現(xiàn)響應(yīng)式，刪除不必要的區(qū)域。細(xì)節(jié)實(shí)現(xiàn)利用定時(shí)器實(shí)時(shí)顯示歌曲播放時(shí)間，利用百分比來動(dòng)態(tài)改變進(jìn)度條的長度。
大概很早的時(shí)候就有想法做一個(gè)音樂播放器玩玩，以前可能還考慮過做APP，大一的時(shí)候第一個(gè)html的靜態(tài)頁面也是做的音樂網(wǎng)站，想想，大概小時(shí)候比較喜歡音樂吧。然而，現(xiàn)在入了前端大坑，就用h5做一個(gè)耍耍好了。功能不多，UI不美，But，練習(xí)了html5中audio及其API的使用。歡迎吐槽~
功能思路分析用了這么多年的音樂播放軟件，目前已是網(wǎng)易云音樂的重度用戶。
一個(gè)基本的音樂播放器基礎(chǔ)功能有：播放、暫停、歌曲切換。
用戶體驗(yàn)基礎(chǔ)功能：歌曲跳躍播放、音量調(diào)整、歌曲單曲或列表循環(huán)。
當(dāng)了解這些之后，再瞅一眼audio的api，簡直了，基本上都能實(shí)現(xiàn)，開做。
采用了比較喜歡的深藍(lán)漸變背景加活力黃搭配，界面沒啥好說的，蘿卜白菜，各有所愛。
用css3媒體查詢實(shí)現(xiàn)響應(yīng)式，刪除不必要的區(qū)域。
1.設(shè)置默認(rèn)屬性
默認(rèn)不自動(dòng)播放audio.autoplay = false;
默認(rèn)不單曲循環(huán)audio.loop = false;
初始化音量audio.volume = 0.5;
默認(rèn)不自動(dòng)緩沖加載audio.autobuffer = false;2.基本功能實(shí)現(xiàn)
這里不提了，有想了解的可以去github(地址)看源碼。
3.細(xì)節(jié)實(shí)現(xiàn)
①利用定時(shí)器實(shí)時(shí)顯示歌曲播放時(shí)間，利用百分比來動(dòng)態(tài)改變進(jìn)度條的長度。
②利用audio.readyState來設(shè)置緩沖進(jìn)度，用css3來實(shí)現(xiàn)平滑改變
在線音樂實(shí)現(xiàn)③可點(diǎn)擊歌曲進(jìn)度條任意位置實(shí)現(xiàn)跳轉(zhuǎn)播放，音量同理
④實(shí)現(xiàn)靜音，單曲循環(huán)和列表循環(huán)
這次采用的是網(wǎng)易云音樂的API來進(jìn)行在線音樂的實(shí)現(xiàn)。此處參考了小青年的文章html5+ XMLHttpRequest 與mui ajax用法詳解。
利用事件委托，為動(dòng)態(tài)加載的結(jié)果綁定監(jiān)聽事件。將搜到的資源數(shù)據(jù)加載到audio中去，然后播放在線資源。
本來想加入localStorage存儲(chǔ)播放列表的，對于體驗(yàn)還有所考慮，畢竟只是個(gè)玩兒的東西，所以保留想法了，沒有加入。
不得不承認(rèn)，總結(jié)能力真的有夠差，直接上結(jié)果吧：(http://fehey.com/hey-Audio/)
喜歡的可以去github看源碼，有什么改進(jìn)，歡迎留言（star也不介意哦?）~
個(gè)人博客：(http://fehey.com/)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91029.html
摘要：第五名中國中國在我們的網(wǎng)上應(yīng)用店里一直評分較高，排名較前。中國手機(jī)網(wǎng)頁端的滑動(dòng)體驗(yàn)和閱讀體驗(yàn)都非常優(yōu)秀，究其原因，我認(rèn)為是十分用心的體驗(yàn)設(shè)計(jì)，與優(yōu)化過的請求，和它對于加速的應(yīng)用。值得一提的是，中國是基于最近大熱的開發(fā)的。 showImg(https://segmentfault.com/img/bVr50R); 前言 優(yōu)秀的前端工程師戴著腳銬跳舞，究竟能把 HTML5 的體驗(yàn)推進(jìn)到什么...
摘要：簡介是一款簡潔漂亮的音樂播放器在我第一次看到這款播放器顏值的時(shí)候讓我眼前一亮，我非常崇拜那些能設(shè)計(jì)出好看界面的設(shè)計(jì)師但是在用過之后發(fā)現(xiàn)還是有不足的地方這是我曾經(jīng)提過的用了一段時(shí)間，很喜歡簡潔的，提一些其他可改進(jìn)的建議我認(rèn)為有必要提供動(dòng)態(tài)管理 簡介 @DIYgod/APlayer 是一款簡潔漂亮的 HTML5 音樂播放器 (〃?ω?) 在我第一次看到這款播放器顏值的時(shí)候讓我眼前一亮，我...
閱讀 2818·2021-09-23 11:44
閱讀 1705·2021-09-13 10:24
閱讀 2666·2021-09-08 09:36
閱讀 1260·2019-08-30 15:54
閱讀 2285·2019-08-30 13:54
閱讀 3344·2019-08-30 10:57
閱讀 1883·2019-08-29 18:43
閱讀 3653·2019-08-29 15:10
