网页播放器开发系列教程(一)
（今天的教程我只是把开头和提纲列出来了，我会陆续补充完善开发教程，希望大家陆续关注）
各位朋友大家好，我是相信神话，从今天开始，我把最近开发的一个网页播放器，开发过程记录下来，希望与此感兴趣的朋友的朋友一起学习研究。也请大家多帮忙指教。
一、写在前面
有些东西写在前面，一边大家总体掌握开发的情况。这个播放器的从开始的美工，切图，开发全部是，我自己一个人开发的，虽然软件不大，但是麻雀虽小五脏俱全，对于刚学前台开发的人，是个思路，条条大路通罗马，也许这就是适合你的一条路。
1.开发用到的语言
这个网页播放器的开发开发，主要是基于html5，Javascript、css进行开发的。
2.开发工具
开发这个网页播放器主要用到如下软件：Photoshop 进行设计，并切图；HTML5是web语言，主要展示播放器界面；CSS是web页面美化语言，主要对播放器进行美化；Javscript是网页播放器核心代码，主要用于播放器的逻辑交互等功能。
二、开发过程记录
再我们开发播放器之前，应该对需要的播放器功能，开发流程要做详细的规划记录，每一个点的样式、功能，都要规划设计好，然后在一步一步开发实现。这样才能按时、按需开发，不至于开发过程中丢三落四，然后再补充，这样会很麻烦，增加开发难度。
我们的这个播放器的功能主要由以下几点功能：一是顺序播放；二是单曲循环；三是随机播放；四是播放进度条显示及调节；五是音量显示及调节；六是播放列表功能；七是歌曲切换、播放、暂停功能。
开发流程主要如下图所示：
（一）播放器页面设计及切图
先看一下播放器的全貌。这个界面是根据功能需求，借鉴别的播放器，设计的一个播放器界面。
图一播放器界面
（二）页面展示
（三）功能开发
1.播放音频；
2.播放进度条功能；
3.音量调节功能；
4.歌曲播放、暂停、切换功能；
6.音频列表；
四、精简提炼
版权声明：本文为helpall原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。