各位朋友大家好，我是相信神話，從今天開始，我把最近開發的一個網頁播放器，開發過程記錄下來，希望與此感興趣的朋友一起學習研究。也請大家多幫忙指教。
一、寫在前面
有些東西寫在前面，一邊大家總體掌握開發的情況。這個播放器的從開始的美工，切圖，開發全部是，我自己一個人開發的，雖然軟體不大，但是麻雀雖小五臟俱全，對於剛學前臺開發的人，是個思路，條條大路通羅馬，也許這就是適合你的一條路。
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 最後切割效果