自定义H5音频组件

自定义支持播放/暂停，进度条拖拽，静音/有声音播放的H5音频播放组件，效果图和具体实现代码如下：

• HTML代码

  <!DOCTYPE html>
  <html lang="en">
  <style type="text/css">
      .audio {
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
  
      .progress-bar-bg {
          width: 40%;
          background-color: #d9d9d9;
          position: relative;
          height: 2px;
          cursor: pointer;
      }
  
      .progress-bar {
          background-color: #649fec;
          width: 0;
          height: 2px;
      }
  
      .progress-bar-bg span {
          content: " ";
          width: 10px;
          height: 10px;
          border-radius: 50%;
          -moz-border-radius: 50%;
          -webkit-border-radius: 50%;
          background-color: #3e87e8;
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -5px;
          margin-left: -5px;
          cursor: pointer;
      }
  </style>
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"
          name="viewport">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <meta name="format-detection" content="telephone=yes" />
      <title>H5播放音频</title>
  </head>
  
  <body>
      <audio src="music.mp3"></audio>
      <div class="audio">
          <image src="./img/play_ic.png" id="audioPlayer" onclick="handlePlay()"></image>
          <span id="currentTime">00:00</span>
          <div class="progress-bar-bg" id="progressBarBg">
              <div class="progress-bar" id="progressBar"></div>
              <span id="progressDot"></span>
          </div>
          <span id="duration">00:00</span>
          <image src="./img/voice_ic.png" id="MutePlayer" onclick="handleMute()"></image>
  </div>
  </body>
  </html>
  

• DOM元素获取

  var audio = document.getElementsByTagName("audio")[0];
  var isPlay = false;
  var isMute = false;
  var audioPlayer = document.getElementById("audioPlayer")
  var MutePlayer = document.getElementById("MutePlayer")
  var progressBarBg = document.getElementById("progressBarBg")
  var progressDot = document.getElementById("progressDot")
  var currentTime = document.getElementById("currentTime")
  var duration = document.getElementById("duration")
  

• 播放/暂停

  //   音频操作函数
  function handlePlay() {
      if (audio.paused) {
          // 开始
          audioPlayer.src = './img/suspend_ic.png';
          audio.play();
          duration.innerHTML = transTime(audio.duration);
      } else {
          // 暂停
          audioPlayer.src = './img/play_ic.png';
          audio.pause();
      }
  }
  

• 进度条操作

  //   音频播放进度实时监听事件
  audio.addEventListener('timeupdate', function () {
      updateProgress();
  }, false);
  //   进度条更新方法
  function updateProgress() {
      var value = audio.currentTime / audio.duration;
      document.getElementById("progressBar").style.width = value * 100 + '%';
      document.getElementById("progressDot").style.left = value * 100 + '%';
      currentTime.innerHTML = transTime(audio.currentTime);
  }
  //   进度条点击事件
  progressBarBg.onmousedown = function (e) {
      if (!audio.paused || audio.currentTime !== 0) {
          var pgsWidth = progressBarBg.clientWidth || progressBarBg.offsetWidth;
          var rate = e.offsetX / pgsWidth;
          audio.currentTime = audio.duration * rate;
          updateProgress();
      }
  }
  //   进度条拖拽事件
  progressDot.addEventListener('touchstart', function (e) {
      if (!audio.paused || audio.currentTime !== 0) {
          var totalLength = progressBarBg.offsetWidth;
          var prevX = e.touches[0].clientX - progressDot.offsetLeft;
          document.addEventListener('touchmove', fnMove, false);
          document.addEventListener('touchend', fnEnd, false);
          function fnMove(e) {
              var difference = e.targetTouches[0].clientX - prevX;
              if (difference >= totalLength) {
                  difference = totalLength;
              } else if (difference <= 0) {
                  difference = 0;
              }
              var rate = difference / totalLength;
              audio.currentTime = audio.duration * rate;
              updateProgress();
          }
          function fnEnd(e) {
              document.removeEventListener('touchmove', fnMove, false);
              document.removeEventListener('touchend', fnEnd, false);
          }
      }
  }, false);
  

• 静音

   //   音量操作函数
   function handleMute() {
       if (audio.muted) {
           //   取消静音
           MutePlayer.src = './img/voice_ic.png';
           audio.muted = false;
       } else {
           //   静音
           MutePlayer.src = './img/mute_ic.png';
           audio.muted = true;
       }
   }
  

• 其他

  // 监听播放完成事件
  audio.addEventListener('ended', function () {
      audioEnded();
  }, false);
  
  /**
  * 播放完成时把进度调回开始的位置
  */
  function audioEnded() {
      document.getElementById("progressBar").width = 0;
      document.getElementById("progressDot").left = 0;
      audioPlayer.src = './img/play_ic.png';
  }
  /**
  * 音频播放时间换算
  * @param {number} value - 音频当前播放时间，单位秒
  */
  function transTime(value) {
      if (!value) {
          return '00:00'
      }
      var time = "";
      var h = parseInt(value / 3600);
      value %= 3600;
      var m = parseInt(value / 60);
      var s = parseInt(value % 60);
      if (h > 0) {
          time = formatTime(h + ":" + m + ":" + s);
      } else {
          time = formatTime(m + ":" + s);
      }
      return time;
  }
  /**
  * 格式化时间显示，补零对齐
  * eg：2:4  -->  02:04
  * @param {string} value - 形如 h:m:s 的字符串 
  */
  function formatTime(value) {
     if (!value) {
         return ''
     }
     var time = "";
     var s = value.split(':');
     var i = 0;
     for (; i < s.length - 1; i++) {
         time += s[i].length == 1 ? ("0" + s[i]) : s[i];
         time += ":";
     }
     time += s[i].length == 1 ? ("0" + s[i]) : s[i];
     return time;
   }