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

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

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

一、写在前面

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

1.开发用到的语言

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

2.开发工具

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

二、开发过程记录

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

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

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

 

(一)播放器页面设计及切图

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

 

 图一播放器界面

 

(二)页面展示

 

(三)功能开发

1.播放音频;

2.播放进度条功能;

3.音量调节功能;

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

6.音频列表;

四、精简提炼

 

猜你喜欢

转载自www.cnblogs.com/helpall/p/10248509.html
今日推荐