音乐播放器的设计与实现

音乐播放器的设计与实现

功能要求：
设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换。
实现效果图：

一、界面设计
1.使用<div>划分区域
1）仿CD图案
2）音量调节进度条
3）歌曲名称显示
4）音乐播放器相关按钮

2.使用<img>标签制作CD图片
关键技术：CSS3 border-radius设置圆角边

#CDimage img{
   
   
 border-radius:50%;
}

3.使用<input>标签制作音量调节进度条

<!--音量调节进度条-->
<div>
<input type="range" min="0" max="1" step="0.1" />
</div>

4.使用<span>标签定义歌曲名称

<!--显示歌曲名称-->
<div>
当前正在播放: <span id="title"