目录标题
- 1.界面设计
-
- 1.1使用div标签划分区域
- 1.2使用<img>标签制作CD图片
- 1.3使用<input>标签制作音量调节进度条
- 1.4使用<span>标签定义歌曲名称
- 1.5使用<button>标签制作音乐播放器按钮
- 2.媒体文件的载入
- 3. 控件功能的实现
-
- 3.1音量调节控制功能的实现
- 3.2“播放/暂停”按钮的功能实现
- 3.3“上一首”和“下一首”按钮的功能实现
- 4.完整代码展示
1.界面设计
1.1使用div标签划分区域
可以使用块级标签div区分4个不同的版块:①仿CD图案;②音量调节进度条;③歌曲名称的显示;④音乐播放器相关按钮。相关HTML5代码片段如下:
下面展示一些 内联代码片。
<body>
<h3>简单音乐播放器</h3>
<hr />
<!--仿CD样式圆形图片-->
<div ></div>
<!--音量调节进度条-->
<div></div>
<!--显示歌曲名称-->
<div></div>
<!--音乐播放器按钮-->
<div></div>
</body>
此时还需要CSS文件辅助渲染样式，因此在本地css文件夹中创建music.css文件，并在head首尾标签中声明对CSS文件的引用。相关HTML5代码片段如下:
下面展示一些 内联代码片。
<head>
<meta charset="utf-8">
<title>简单音乐播放器</title>
<link rel="stylesheet" href="css/music.css">
</head>
在CSS文件中为div标签预设统一样式:内容居中显示、外边距10像素。相关CSS代码片段如下:
下面展示一些 内联代码片。
div{
text-align:center;
margin:10px;
此时尚未在各个div首尾标签之间填充内容，因此在网页上浏览没有实际效果，需等待后续补充。
1.2使用标签制作CD图片
使用本地image文件夹中的sky.jpg图片作为音乐播放的CD图片样式，图片初始宽度和高度均为300像素。相关HTML5代码片段如下:
下面展示一些 内联代码片。
<!--仿CD样式圆形图片-->
<div >
<img src="image/sky.jpg" />
</div>
因图片宽高符合设计要求，故无须在img标签中进行width(宽度)和height(高度)属性的设置。如果选用的是未经过处理的其他长宽比例的图片，可以用这两个属性进行约束。同时为了方便后续的CSS样式渲染,为当前的块级元素div设置了id名称为CDimage，该名称可以自定义。
此时图片还是方形的样式，为了方便最终形成圆形效果有两种解决方案:一是直接使用经过PS处理的图片，做成背景透明的pg文件格式即可;二是无须PS图像处理技术,直接使用CSS3技术在music.css文件中对该图片进行设置。
使用CSS3技术设置圆形图案的相关CSS 代码片段如下:
下面展示一些 内联代码片。
#CDimage img{
border-radius:50%;
}
本例用到了CSS3技术中的border-radius属性，该属性可以为块级元素设置圆角边框效果。当前设置成50%为正圆形效果图案。
1.3使用标签制作音量调节进度条
可以使用HTML5表单input标签的新增类型range制作音量调节进度条。
相关HTML5代码片段如下:
下面展示一些 内联代码片。
<!--音量调节进度条-->
<div>
<input type="range" min="o" max="1" step="0.1" />
</div>
该进度条规定了音量最小值为0(min=“0”)、音量最大值为1(max=“1”)，并且刻度间隔为0.1 (step=“0.1”)。
还需要为其添加相关JavaScript代码才可实现真正的音量调节功能。接下来将介绍如何显示歌曲名称。
1.4使用标签定义歌曲名称
可以使用span标签显示歌曲名称，方便后期切换上一首或下一首歌曲时动态变化歌曲名称的显示。相关HTML5代码片段如下:
下面展示一些 内联代码片。
<!--显示歌曲名称-->
<div>
当前正在播放:<span >小夜曲</span>
</div>
为方便切换歌曲时能动态地同步更新歌曲名称，需要在JavaScript里面调用该span标签,因此为该span标签设置了id名称为tit
发布者：admin，转转请注明出处：http://www.yc00.com/web/1754992177a5224740.html
评论列表（0条）