【HTML5媒体API项目】-音乐播放器的设计与实现

音乐播放器的设计与实现

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

切换为下一首：

1、 音量调节控件功能的实现

HTML5 部分添加onchange声明后：

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

在JavaScript中使用document.getElementById（“ID名称”）的方法获取音频对象和音量进度条。

//获取音频对象
    var music=document.getElementById("audio");
    //获取音量调节进度条
    var volume=document.getElementById("volume");

在JavaScript中setVolume()的完整代码：

 //音量大小
   function setVolume(){
   
    music.volume=volume.value;
   }   

2、 播放暂停按钮的功能实现

HTML5添加播放暂停按钮：

<button id="toggleBtn" onclick="toggleMusic()">
        <img src="5.PNG" width="50" height="50"/>
 </button>

JavaScript部分：

//音乐播放暂停切换方法
  function toggleMusic(){
   
      if(music.paused){
   
          music.play();
          toggleBtn.innerHTML='<img src="6.PNG" width="50" height="50"/>';
      }
      else{
   
          music.pause();
          //暂停音乐
          toggleBtn.innerHTML='<img src="5.PNG" width="50" height="50"/>';
      }
  }

3、 上一首和下一首按钮的功能实现

HMTL5部分的代码：

  <button onclick="lastMusic()">
        <img src="333.PNG" width="50