《微信公衆平臺入門到精通》Vol.20

時間  2019-12-07
標籤 微信公衆平臺入門到精通 vol.20 vol 简体版
原文   原文鏈接

logo

前兩天上線的ZTalk音樂盒子頗受好評，不少朋友都在後臺求教程求源碼，雖然這個播放器的開發比較複雜，但既然你們有興趣，那我就寫下開發步驟吧，所有教程會分爲三次，裏面牽扯的除了PHP編程外，還有JS開發，今天先講前端靜態頁面的代碼。css

源碼請在公衆號裏輸入「微信代碼」查看下載鏈接，而後將下載連接本身想辦法搞到PC上而後再下載，下載後上傳到本身sae裏就能夠直接在瀏覽器運行，固然你也能夠在微信裏經過連接來查看。html

建議先下載安裝了再看文章，如下是注意事項：前端

一、audio.html是播放器的前端靜態展現頁。html5

二、image目錄裏是播放器要用到的圖片，好比播放、暫停、背景等，和一些JS插件，包括了jquery框架。jquery

三、image目錄裏能夠修改的就是common.css，這個是播放器的樣式文件，若是有CSS基礎的同窗能夠本身修改。編程

四、image目錄下可替換圖片：segmentfault

bg0.jpg 頁面背景圖片
coverbg.png 播放器默認背景圖片


第十六章 微信音樂播放器開發

1、Html5的audio組件

HTML5 有兩個很炫的元素，就是Audio和 Video,能夠用他們在頁面上建立音頻播放器和視頻播放器，製做一些效果很不錯的應用。瀏覽器

在sae的代碼管理裏新建一個HTML頁面，命名爲test.html。
img-2緩存

html5的頁面最基本的框架以下，橙色字爲文檔聲明，有了這個就代表這是一個html5的頁面。
img-3微信

在<body></body>中添加一個音頻元素：

<audio src="http://www.eduhope.cn/yx2011/audio_hi.mp3" controls="controls" autoplay="autoplay"></audio>

img-4

在谷歌Chrome瀏覽器中訪問這個url，效果以下：
img-5

controls指的是用戶控制界面,因此咱們能夠在Web頁面中看到上面這個操做面板，包括播放和暫停，播放進度條，音量進度條，和進度時間顯示等。autoplay 指的是自動播發已加載的媒體文件，因此咱們一打開頁面就能夠直接播放了

不管是視屏仍是音頻，都是一個容器文件，包含了一些音頻軌道，視頻軌道和一些元數據，這些是和你的視頻或者音頻控件綁定到一塊的，這樣才造成了一個完整的播放組件。

不過因爲html5的標準還不統一，還有部分安卓系統內置瀏覽器是閹割了這些組件的，因此使用安卓手機的朋友若是在微信內置瀏覽器裏沒法欣賞音樂的，能夠點擊右上角分享按鈕選擇複製鏈接，而後到QQ瀏覽器裏打開。

2、設計個性的音樂播放器

使用瀏覽器默認的播放器確定不夠高端大氣上檔次，所以咱們要本身設計一款音樂播放器，美工這塊我就不寫了，本身發揮吧……重點說下靜態頁面的結構。

在sae裏打開audio.html文件，頭部比前面的H5基本結構多了不少代碼，不要慌我給你們解釋下。
img-6

第4行是定義該網頁的類型和編碼，決定瀏覽器將以什麼形式、什麼編碼讀取這個文件，這裏是告訴瀏覽器這是一個html文件，用的UTF8編碼。

第5行是這個頁面的標題，會顯示在瀏覽器的頭部。

第6行是文檔做者，就是我了。

第7行是控制屏幕大小的，width 頁面寬度，nitial-scale - 初始的縮放比例，minimum-scale - 容許用戶縮放到的最小比例，user-scalable - 用戶是否能夠手動縮放。這段代碼用來限制播放器的顯示大小與手機屏幕一致，不能縮放。

第9行是載入樣式文件

第十、十一、12行載入JS插件，其中common.js裏是播放器控制JS代碼，具體內容會放到最後一期講。

進入頁面主題首先是播放器結構，以下圖：
img-7

第16行是整個播放器的容器，規定了這個播放器的大小和位置，以及播放器的背景，這裏提下如何把播放器絕對居中，CSS代碼以下：

position:absolute;padding:5px;top:50%; margin-top:-155px; left:50%;width:300px;height:300px; margin-left:-155px;

此容器爲相對於網頁絕對定位，寬高爲300px，內邊距5px，總體大小爲310*310px，距離頁面的頂部和左邊都爲50%距離，而後經過外邊距負155px讓容器向頂部和左邊移動一半的容器大小，這樣就絕對居中了。

第17行唱片封面，疊加了一個背景圖片。這裏可能有人說爲何不直接用播放器容器背景圖作唱片封面，這裏主要是唱片封面是常常要切換的，網速不給力的話會出現一塊空白很差看。

第1八、19行喜歡按鈕、列表按鈕，也是使用了絕對定位，固然這個定位是相對於播放器容器的。

第20行播放控制區塊，這裏有個黑色漸變背景圖案疊加在唱片封面圖片，以突出顯示歌曲標題、名字等信息。

第2一、22行歌曲標題和歌手名字

第23到28行播放進度條區域，這裏有兩個div，pgbuf是歌曲緩存載入進度，pgtime是歌曲播放進度。

第29到30行前進、播放和後退播放按鈕，播放按鈕能夠經過playbtn、pausebtn兩個樣式切換變爲暫停按鈕。

第37行歌曲的說明。

第38行Audio播放組件，這裏給組件命名爲song_player，而後就能夠經過JS來控制這個播放組件，進行播放暫停操做，獲取播放進度等。

第39行頁面底部的版權信息

而後是歌曲列表部分，以下圖：
img-8

第40行歌曲列表容器，自適應寬度，默認隱藏。

第41行歌曲列表欄頭部分

第43-45行列表內容類型切換以及列表關閉按鈕

第48到57行歌曲列表內容

第58到65行列表翻頁控制區

最後的展示效果以下：
img-9
img-10

前端靜態頁面基本就是這些，下一章講管理後臺、與前端頁面數據交換接口的開發。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程