网页播放器开发系列教程(一)

（今天的教程我只是把开头和提纲列出来了，我会陆续补充完善开发教程，希望大家陆续关注）

各位朋友大家好，我是相信神话，从今天开始，我把最近开发的一个网页播放器，开发过程记录下来，希望与此感兴趣的朋友的朋友一起学习研究。也请大家多帮忙指教。

一、写在前面

有些东西写在前面，一边大家总体掌握开发的情况。这个播放器的从开始的美工，切图，开发全部是，我自己一个人开发的，虽然软件不大，但是麻雀虽小五脏俱全，对于刚学前台开发的人，是个思路，条条大路通罗马，也许这就是适合你的一条路。

1.开发用到的语言

这个网页播放器的开发开发，主要是基于html5，Javascript、css进行开发的。

2.开发工具

开发这个网页播放器主要用到如下软件：Photoshop 进行设计，并切图；HTML5是web语言，主要展示播放器界面；CSS是web页面美化语言，主要对播放器进行美化；Javscript是网页播放器核心代码，主要用于播放器的逻辑交互等功能。

二、开发过程记录

再我们开发播放器之前，应该对需要的播放器功能，开发流程要做详细的规划记录，每一个点的样式、功能，都要规划设计好，然后在一步一步开发实现。这样才能按时、按需开发，不至于开发过程中丢三落四，然后再补充，这样会很麻烦，增加开发难度。

我们的这个播放器的功能主要由以下几点功能：一是顺序播放；二是单曲循环；三是随机播放；四是播放进度条显示及调节；五是音量显示及调节；六是播放列表功能；七是歌曲切换、播放、暂停功能。

开发流程主要如下图所示：

 

（一）播放器页面设计及切图

先看一下播放器的全貌。这个界面是根据功能需求，借鉴别的播放器，设计的一个播放器界面。

 

 图一播放器界面

 

（二）页面展示

 

（三）功能开发

1.播放音频；

2.播放进度条功能；

3.音量调节功能；

4.歌曲播放、暂停、切换功能；

6.音频列表；

四、精简提炼

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有