html5 audio多首MP3随机播放【原创】

查看演示 下载资源 下载积分： 60 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分除了引入jQuery库外，还要设置好各元素的样式，代码如下：

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<style>
  *{ margin: 0; padding:0;}
  body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;}
  #audio{ width: 100%;}
  .color_gray{ background: #e4e4e4}
  .hide{ display: none;}
  .show{ display: block;}
  .pause{ background:#00a2ff}
  /*进度条样式*/
  .progressBar{width: 100%; height: 10px;margin: 15px auto 15px auto; position:absolute; left: 0; bottom: 38px;}
  .progressBar div{position: absolute;}
  .progressBar .progressBac{width: 100%; height: 2px;  left: 0; top:0; background: #e4e4e4;}
  .progressBar .speed{width: 100%; height: 2px; left: -100%; background: #00a2ff; }
  .progressBar .drag{width: 12px; height: 12px; left: 0; top:-5px; background: #00a2ff; opacity: 1; border-radius: 50px; box-shadow: #fff 0 0 5px;}
  /*时间样式*/
  #time{width: 100%; height: 12px;position: absolute; left: 0; bottom:36px; color:#888;}
  .currentTime{float: left;margin-left: 8px;color: #00a2ff;}
  .allTime{float: right;margin-right: 8px;}
  #songInfo{overflow: hidden; width: 280px; height:50px; line-height: 50px; text-align: center; color: #00a2ff;   margin-top: -25px; margin-left:-140px; position: absolute; left:50%; bottom: 88px; font-weight: 600;}
  .shareImg{position: absolute; left: 100000px;}
  #control {width: 30px;height: 30px;position: absolute;bottom: 25px;left: calc(50% - 15px);cursor: pointer;z-index: 999;}
  .mico {width: 30px;height: 30px;border-radius: 50%;-webkit-box-shadow: #ccc 0px 0px 10px;-moz-box-shadow: #ccc 0px 0px 10px;box-shadow: #ccc 0px 0px 10px;}
  .bar {background: #00a2ff;width: 3px;height: 3px;position: absolute;bottom: 1px;animation: sound 0ms -800ms linear infinite alternate;}
  @keyframes sound {0% {opacity: .35;height: 3px;}100% {opacity: 1;height: 28px;}}
  .bar:nth-child(1)  { left: 1px; animation-duration: 474ms; }
  .bar:nth-child(2)  { left: 5px; animation-duration: 433ms; }
  .bar:nth-child(3)  { left: 9px; animation-duration: 407ms; }
  .bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }
  .bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }
  .bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }
  .bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }
  .bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }
</style>

页面的body部分有点小复杂，通过javascript将播放器的歌曲、进度变化、点击触发等事件设置好，部分javascript代码如下：

//点击播放/暂停
function clicks() {
  var audio = document.getElementById("audio");
  $("#control").click(function() {
    if($(this).find("div").length>0){
      $(this).html('<img  class="mico" src="images/mico.png">');
      audio.pause();
    }else{
      $(this).html('<div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>');
      audio.play();//开始播放
      dragMove();//并且滚动条开始滑动
    }
  })
}

//播放时间
function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式
  var timePlace = document.getElementById(timePlace);
  //分钟
  var minute = time / 60;
  var minutes = parseInt(minute);
  if (minutes < 10) {
      minutes = "0" + minutes;
  }
  //秒
  var second = time % 60;
  seconds = parseInt(second);
  if (seconds < 10) {
      seconds = "0" + seconds;
  }
  var allTime = "" + minutes + "" + ":" + "" + seconds + ""
  timePlace.innerHTML = allTime;
}

//播放事件监听
function playCotrol() {
  audio.addEventListener("loadeddata", //歌曲一经完整的加载完毕
    function() {
      addListenTouch(); //歌曲加载之后才可以拖动进度条
      var allTime = audio.duration;
      timeChange(allTime, "allTime");
      setInterval(function() {
        var currentTime = audio.currentTime;
        $("#time .currentTime").html(timeChange(currentTime, "currentTime"));
      }, 1000);
      clicks();
    }, false);
  audio.addEventListener("pause",
    function() { //监听暂停
      $("#control").html('<img  class="mico" src="images/mico.png">');
      if (audio.currentTime == audio.duration) {
        audio.pause();
        audio.currentTime = 0;
      }
    }, false);
  audio.addEventListener("play",
    function() { //监听播放
      $("#control").html('<div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>');
      dragMove();
    }, false);
  audio.addEventListener("ended", function() {
    getSong();
  }, false)
}

最后设置好播放器各元素的容器即可，代码如下：

<!--audiostart-->
<audio id="audio" src=""  loop="loop" autoplay="autoplay" ></audio>
<!--audio End-->

<!--播放控制按钮start-->
<div id="control">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<!--播放控制按钮end-->

<!--时间进度条块儿start-->
<section class="progressBar">
    <div class="progressBac"></div>
    <div class="speed" id="speed"></div>
    <div class="drag" id="drag"></div>
</section>
<!--时间进度条块儿end-->

<!--播放时间start-->
<div id="time"><div class="tiemDetail"><span class="currentTime" id="currentTime">00:00</span><span class="allTime" id="allTime">00:00</span></div></div>
<!--播放时间end-->
<!--歌曲信息start-->
<div id="songInfo">html5 audio多首MP3随机播放</div>
<!--歌曲信息end-->