（今天的教程我只是把開頭和提綱列出來了，我會陸續補充完善開發教程，希望大家陸續關注）

各位朋友大家好，我是相信神話，從今天開始，我把最近開發的一個網頁播放器，開發過程記錄下來，希望與此感興趣的朋友的朋友一起學習研究。也請大家多幫忙指教。

一、寫在前面

有些東西寫在前面，一邊大家總體掌握開發的情況。這個播放器的從開始的美工，切圖，開發全部是，我自己一個人開發的，雖然軟體不大，但是麻雀雖小五臟俱全，對於剛學前臺開發的人，是個思路，條條大路通羅馬，也許這就是適合你的一條路。

1.開發用到的語言

這個網頁播放器的開發開發，主要是基於html5，Javascript、css進行開發的。

2.開發工具

開發這個網頁播放器主要用到如下軟體：Photoshop 進行設計，並切圖；HTML5是web語言，主要展示播放器介面；CSS是web頁面美化語言，主要對播放器進行美化；Javscript是網頁播放器核心程式碼，主要用於播放器的邏輯互動等功能。

二、開發過程記錄

再我們開發播放器之前，應該對需要的播放器功能，開發流程要做詳細的規劃記錄，每一個點的樣式、功能，都要規劃設計好，然後在一步一步開發實現。這樣才能按時、按需開發，不至於開發過程中丟三落四，然後再補充，這樣會很麻煩，增加開發難度。

我們的這個播放器的功能主要由以下幾點功能：一是順序播放；二是單曲迴圈；三是隨機播放；四是播放進度條顯示及調節；五是音量顯示及調節；六是播放列表功能；七是歌曲切換、播放、暫停功能。

開發流程主要如下圖所示：

（一）播放器頁面設計及切圖

先看一下播放器的全貌。這個介面是根據功能需求，借鑑別的播放器，設計的一個播放器介面。

 圖一播放器介面

（二）頁面展示

（三）功能開發

1.播放音訊；

2.播放進度條功能；

3.音量調節功能；

4.歌曲播放、暫停、切換功能；

6.音訊列表；

四、精簡提煉