HTML在线播放音乐实例,一步一步实战HTML音乐播放器(示例代码)

在这里我用HTML5从头开始一步一步来制作一个简约的音乐播放器，大家可以参考一下，接下来正式开始。

音乐播放器效果

播放器分析

这里将播放器分两块来做：

视图层(html + css)

逻辑层 ( js )

视图层分析

视图中包含：

播放器容器

播放器名称

音乐专辑图

音乐信息

歌曲名

歌手

专辑名

控制区

上一曲

播放

下一曲

播放进度条

播放时间

当前时间

歌曲总时间

音频控件

页面背景

逻辑层分析

逻辑层处理包括：

加载歌单

渲染歌曲信息

专辑图

歌曲名

歌手

专辑名

歌曲时长

歌曲音频地址

监听控制按钮

播放按钮 (修改播放状态)

上一曲(判断歌单边界，重新渲染歌曲信息)

下一曲(判断歌单边界，重新渲染歌曲信息)

定时器

同步歌曲当前时间和播放进度条

歌曲播放完，自动切换下一曲

好了，播放器基本分析完成，接下来开始编码了，先进行视图层的编写。

视图层结构编写

根据我在上面的视图层分析，来构建HTML结构。

建立index.html，结构编码如下：

音乐播放器

好了，结构编写完毕，接下来编写视图层样式。

视图层样式编写

注：这里我是用LESS写的CSS，后面我会贴出完整代码，或者到 CSDN CODE 下载源码

先重置标记样式：

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin:0;

padding:0;

border:0;

font-size:100%;

font:inherit;

vertical-align:baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display:block;

}

body {

line-height:1;

}

ol, ul {

list-style:none;

}

blockquote, q {

quotes:none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:'';

content:none;

}

table {

border-collapse:collapse;

border-spacing:0;

}

设置body：

//这里主要设置背景和flex布局，用于播放器垂直居中

@body-bg: #111;

html,body{

height: 100%;

}

body{

background-color: @body-bg;

display: flex;

align-items: center;

justify-content: center;

color: #fff;

font: 16px "微软雅黑";

}

设置播放器容器 .player：

//主要设置播放器的大小、背景颜色、定位等信息

@player-bg:lighten(@body-bg,10%);

@player-w:375px;

@player-h:550px;