【音乐播放器的设计与实现】-CSDN博客

本文链接：https://blog.csdn.net/m0_71941456/article/details/135532646

目录标题

1.界面设计
2.媒体文件的载入
3. 控件功能的实现
4.完整代码展示

1.界面设计

1.1使用div标签划分区域

可以使用块级标签div区分4个不同的版块:①仿CD图案;②音量调节进度条;③歌曲名称的显示;④音乐播放器相关按钮。相关HTML5代码片段如下:
下面展示一些 内联代码片。

<body>
<h3>简单音乐播放器</h3>
<hr /> 
<!--仿CD样式圆形图片-->
<div id="CDimage"></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 id="CDimage">
<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 id="title">小夜曲</span>
</div>

为方便切换歌曲时能动态地同步更新歌曲名称，需要在JavaScript里面调用该span标签,因此为该span标签设置了id名称为title,同样该id名称也可以自定义为其他内容。
后续还需要为其添加相关JavaScript代码才可实现名称随着歌曲的切换而变化的效果。接下来将介绍如何显示音乐播放器的按钮。