HTML在线播放⾳乐实例,⼀步⼀步实战HTML⾳乐播放器（⽰
例代码）
在这⾥我⽤HTML5从头开始⼀步⼀步来制作⼀个简约的⾳乐播放器，⼤家可以参考⼀下，接下来正式开始。
⾳乐播放器效果
播放器分析
这⾥将播放器分两块来做：
视图层(html + css)
逻辑层 ( js )
视图层分析
视图中包含：
播放器容器
播放器名称
⾳乐专辑图
⾳乐信息
歌曲名
歌⼿
专辑名
控制区
上⼀曲
播放
下⼀曲
播放进度条
播放时间
当前时间
歌曲总时间
⾳频控件
页⾯背景
逻辑层分析
逻辑层处理包括：
加载歌单
渲染歌曲信息
专辑图
歌曲名
歌⼿
专辑名
歌曲时长
歌曲⾳频地址
监听控制按钮
播放按钮 (修改播放状态)
上⼀曲(判断歌单边界，重新渲染歌曲信息)
下⼀曲(判断歌单边界，重新渲染歌曲信息)
定时器
同步歌曲当前时间和播放进度条
歌曲播放完，⾃动切换下⼀曲
好了，播放器基本分析完成，接下来开始编码了，先进⾏视图层的编写。
视图层结构编写
根据我在上⾯的视图层分析，来构建HTML结构。
建⽴index.html，结构编码如下：
⾳乐播放器
好了，结构编写完毕，接下来编写视图层样式。
视图层样式编写
注：这⾥我是⽤LESS写的CSS，后⾯我会贴出完整代码，或者到 CSDN CODE 下载源码先重置标记样式：
html, body, div, span, applet, object, iframe,
jquery在线库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;
.player{
width: @player-w;
height: @player-h;
background-color: @player-bg;
border-radius: 10px;
position: relative;
}
设置播放器名称.header样式：
.player{
.header{
padding: 15px 0;
text-align: center;
}
}
专辑图.albumPic样式：
.player{
.albumPic{
background-size: cover; //背景模式
width: @player-w * 0.72; //通过计算设置宽⾼，可直接⽤百分⽐height: @player-w * 0.72;
margin: auto; //居中
border-radius: 10px;
}
}
专辑信息区域样式：
.
player{
.trackInfo{
text-align: center;
padding: 20px 0 15px;
font-size: 14px;
white-space: nowrap;
//单独将歌曲名设置⼀下⼤⼩
.name{
font-size: 24px;
margin-bottom: 10px;
font-weight: bold;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。