单曲播放器定稿版

马黑黑 · 发表于 2022-2-14 10:39

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

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

x

单曲web页播放器：

功能：实现基于 audio 控件的单曲播放器，无audio界面，自动播放，循环播放，可暂停&播放、可控制进度。CSS、JS与HTML融合在一个web页，无需剥离（当然也可加工剥离）。能适应各种复杂web页环境。

代码：

<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/08/c4598a328b0b6a04000fc461e69737d5.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.style.backgroundSize = jd+ "% 8px";
}

jindu.onclick = function(){ //进度控制
      let w = offset(jindu,"left");
      var x = (event.clientX - w) * aud.duration / jindu.clientWidth;
      aud.currentTime = x;
}

function offset(obj,direction){//获取父级元素偏移总量
      let offsetDir = "offset" + direction[0].toUpperCase()+direction.substring(1);
      let realNum = obj[offsetDir];
      let positionParent = obj.offsetParent;
      while(positionParent != null){
            realNum += positionParent[offsetDir];
            positionParent = positionParent.offsetParent;
      }
      return realNum;
}

btn.onclick = function(){ // 暂停&播放
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

样式演示：

·