单曲可控进度播放器：不知这样可不可以

马黑黑 · 发表于 2022-2-13 23:52

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

·

改变：① 加入进度可控功能；② 调整播放进度条颜色；③ 播放数字进度采用分秒倒计时方式。

马黑黑 · 发表于 2022-2-13 23:54

本帖最后由马黑黑于 2022-2-13 23:59 编辑

代码分享：

<style type="text/css">
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(0,0,0,.8);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #eee;
      text-align: center;
      background: linear-gradient(90deg, olive, green) no-repeat;
      background-size: 8px 0px;
      cursor: pointer;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>

<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
            <div id="jd-go"></div>
      </div>
</div>

<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
aud.loop = true;

aud.src = "http://www.kumeiwp.com/sub/filestores/2022/02/13/711502968bcc2ea282d60c96c7556d18.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      let auT = Math.floor(aud.duration - aud.currentTime);
      let auM = auT / 60;
      let auMs = parseInt(auM);
      if (auMs <10) auMs = "0" + auMs;
      let auS = auT % 60;
      let auSs = Math.round(auS);
      if (auSs < 10) auSs = "0" + auSs;
      jindu.innerHTML = "- " + auMs +":" + auSs;
      let jd = (100*aud.currentTime)/aud.duration;
      //jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 8px";
}

jindu.onclick = function(){ //进度控制
      var x = (event.clientX - jindu.offsetLeft)*aud.duration/jindu.clientWidth;
      aud.currentTime = x;
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>