各位朋友大家好，我是相信神話，從今天開始，我把最近開發的一個網頁播放器，開發過程記錄下來，希望與此感興趣的朋友一起學習研究。也請大家多幫忙指教。
一、寫在前面
有些東西寫在前面，一邊大家總體掌握開發的情況。這個播放器的從開始的美工，切圖，開發全部是，我自己一個人開發的，雖然軟件不大，但是麻雀雖小五臟俱全，對於剛學前台開發的人，是個思路，條條大路通羅馬，也許這就是適合你的一條路。
1.開發用到的語言
這個網頁播放器的開發，主要是基於html5，Javascript、css進行開發的。
2.開發工具
開發這個網頁播放器主要用到如下軟件：Photoshop(以下簡稱PS) 進行設計，並切圖；HBuilderX主要編寫HTML5代碼，主要展示播放器界面；CSS是web頁面美化語言，主要對播放器進行美化；Javscript是網頁播放器核心代碼，主要用於播放器的邏輯交互等功能。
二、開發過程記錄
再我們開發播放器之前，應該對需要的播放器功能，開發流程要做詳細的規划記錄，每一個點的樣式、功能，都要規划設計好，然后在一步一步開發實現。這樣才能按時、按需開發，不至於開發過程中丟三落四，然后再補充，這樣會很麻煩，增加開發難度。
這個播放器的功能主要由以下幾點功能：一是順序播放；二是單曲循環；三是隨機播放；四是播放進度條顯示及調節；五是音量顯示及調節；六是播放列表功能；七是歌曲切換、播放、暫停功能。
開發流程主要如下圖所示：
（一）播放器頁面設計及切圖
先看一下播放器的全貌。這個界面是根據功能需求，借鑒別的播放器，設計的一個播放器界面。我的美工是業余，大家湊合這看吧，重點講解開發的東西。
圖1播放器界面
1.界面設計
首先我先用PS設計出如圖1的播放器界面。詳細設計步驟不再表述，這是美工的主要工作，下面我主要講解一下切圖工作，這部分工作我認為還是自己動手比較合適，美工不知道我們的需求，也不知道怎么切割符合我們的要求，所以要親自動手。掌握一些圖片設計工具還是十分有必要的
我們用PS打開設計圖（如圖2），還是老思路，首先是對設計圖進行整體分析，具體怎么切割才符合簡單、占用網速帶寬少，又不失美觀，做到心中有數。
圖2 PS界面
PS界面介紹。首先我們來介紹一下PS軟件界面，圖2中是一個完整的PS界面，左側是工具箱，中間是設計圖，右側最下方是圖層面板（圖中有詳細的標注），這三個區域是我們常用的部分。
②獲取單一圖片背景色值。從設計圖來看，播放器背景色單一，我們只要獲取背景顏色RGB值即可，在網頁展示的時候用CSS設置這個背景顏色值就可以了。獲取這個顏色值，在PS中十分簡單，我們點擊工具箱中的前景色，會跳出顏色面板，鼠標移動到設計稿背景色上，會有一個吸管工具，點擊一下，顏色面板中會顯示剛才吸管吸取的顏色值，整改操作過程圖3全部標識清楚了，只要按照表示步驟1-4操作即可，我們的顏色值獲取到了，顏色值為“f0f8ff”，這個數值我們記住，以后我們用的到。
圖3 獲取背景顏色值
圖4播放按鈕 圖5播放按鈕拆解③分解設計圖。所謂分解設計圖就是把設計圖分解成一個個圖片，共我們在Html和css中使用。根據設計圖來看，播放、暫停、上一首、下一首按鈕在一起是個組合（如圖4），
圖4播放按鈕
圖5播放按鈕拆解
所以我們要把圖4拆解成背景，和播放、暫停、上一首、下一首圖片（如圖5），然后我們在CSS中把這些組合在一起。首先我們找到播放、暫停、上一首、下一首圖對應圖層，單擊圖層前面的眼睛圖標，隱藏圖層，操作如圖6，最后顯示效果如圖7。選中組合背景圖層，然后按住Ctrl按鍵單擊該圖層，這樣顯示區的圖片就被選中了，然后在PS工具箱中找到剪裁工具，操作如圖8所示。然后在圖片上單擊一下，出現剪裁預覽樣式如圖9，然后單擊回車按鈕，隨便選擇其它一個工具箱中按鈕，彈出對話框，選擇裁剪按鈕，就能得到我們想要的圖片了，整改操作過程如圖10所示。然后，依次選擇“菜單”→“導出”→“存儲web所有格式（舊版）”，然后預設選擇“PNG-24”，然后選擇存儲即可，操作過程如圖11所示。
圖6顯示需要的圖層，關閉不需要的圖層
圖7去除不顯示圖層后的效果
圖層8 選中背景操作
圖9 剪裁預覽樣式
圖10 剪裁成功
圖11 存儲圖片
記住這個流程，以后我們每一步需要提取圖片的時候，都是大同小異的操作。總的思想是：項獲取哪部分圖片就顯示哪部分圖層，同時隱藏掉的圖層，然后再剪裁保存。我們把這個操作叫走為“提取圖片步驟”，以便我們后面使用方便。
按照“提取圖片步驟”，依次提取上一首、下一首、播放、停止按鈕圖片，如圖5所示。同理我們提取進度條背景、音量控制背景，音量大小背景，進度播放頭，音量播放頭、隨機播放選中和釋放、單曲循環選中和釋放等圖片，最后提取圖片如圖12所示。但是值得一體的是，在獲取進度背景、音量背景和音量播放背景時，只要獲取一像素寬的圖片即可，原因是：我們再后面HTML展示頁面時，用CSS設置對圖片平鋪就可實現效果。這樣我們所有的素材圖片就全部准備好了，下一步我們將編寫HTML代碼和CSS代碼，將所有提取分割的素材從新組合，以網頁的形式展示。
圖12 最后切割效果