音乐播放器的设计与实现

音乐播放器的设计与实现

功能要求：
设计一款基于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">小夜曲</span>
</div>

5.使用<button>标签制作音乐播放器按钮

<button><img src="image/previous.png" width="50" height="50"/>
</button>

二、媒体文件载入
1.使用HTML5音频的<audio>标签
2.不添加controls属性，以禁用浏览器自带的音乐播放器

<!--音乐文件的载入-->
<audio id="audio" src="music/Serenade.mp3" preload>
对不起，您的浏览器不支持HTML5音频播放。
</audio>

三、控件功能实现
1.音量调节控制功能实现

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

function setVolume() {
    music.volume = volume.value;
}

2.播放/暂停按钮功能实现

<button id="toggleBtn" onclick="toggleMusic()"><img src="image/play.png" width="50" height="50"/></button>

//音乐播放/暂停切换方法
function toggleMusic() {
     if (music.paused) {
          music.play();//播放音乐
     } else {
          music.pause();//暂停音乐
     }
}

3.上一首/下一首按钮功能实现
1）为“上一首”按钮提供点击事件οnclick=“lastMusic()”；
2）为“下一首”按钮提供点击事件οnclick=“nextMusic()”。

四、部分代码

<h3>简单音乐播放器</h3>
        <hr />
        <!--音乐文件的载入-->
        <audio id="audio" src="music/白莲花.mp3" preload>
            对不起，您的浏览器不支持HTML5音频播放
        </audio>
        <div id="CDimage">
            <img src="image/sky.jpg" />
        </div>
        <!--音量调节进度条-->
        <div>
            <input id="volume" type="range" min="0" max="1" step="0.1"  onchange="setVolume()" />
        </div>
        <!--显示歌曲名称-->
        <div>
            当前正在播放:  <span id="title">小夜曲</span>
        </div>
        <!--控件功能实现-->
        <div>

备注：完整代码请下载附件
https://download.csdn.net/download/YQEMMMM/13025776