使用HTML5標籤和簡單的JavaScript實現簡單的網頁音樂播放器,效果如圖
工具/原料
已安裝Dreamweaver或其它網頁編輯器的電腦一臺
HTML程式碼
HTML程式碼,其中使用HTML5標籤有audio、input中type="range"標籤。“播放列表”的li標籤太長我給合併縮起來了。
CSS程式碼
輸入相應的CSS程式碼
JavaScript程式碼
獲取HTML元素,包括點選的按鈕,圖片,播放列表等
音量按鈕的JavaScript程式碼
設定自動播放、播放檔案、播放音量、播放時間、播放切換的JavaScript程式碼
上一首點選按鈕JavaScript程式碼
下一首點選按鈕JavaScript程式碼
點選列表播放JavaScript程式碼
檔案目錄
主目錄
audio資料夾,音樂mp3檔案存放路徑。為了JavaScript程式碼操作方便都用mp3格式。
images資料夾,圖片png檔案檔案存放路徑。為了JavaScript程式碼操作方便都用png格式。大圖用 "音樂名.png",小圖示用 "音樂名_icon.png",這樣更加方便管理,有條理方便JavaScript操作。
注意事項
JavaScript程式碼放在body標籤後面