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

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

<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>

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

<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
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>

马黑黑 发表于 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>

小辣椒 发表于 2022-2-14 01:07

黑黑 太棒了{:4_178:}

小辣椒 发表于 2022-2-14 01:08

@来看你
看看这个你可以直接加音乐

小辣椒 发表于 2022-2-14 01:08

@千羽

这个是单曲播放器

小辣椒 发表于 2022-2-14 01:08

黑黑，现在功能齐全了{:4_199:}

马黑黑 发表于 2022-2-14 09:55

小辣椒 发表于 2022-2-14 01:08
黑黑，现在功能齐全了

关于进度控制，还有一些因素没有纳入：当装载播放器进度条div的父级元素有position定位时，鼠标单击进度条获得的鼠标指针位置是不准确的。本帖能准确控制进度是因为进度条没有处在复杂的环境。

单曲播放器定稿版我正在鼓捣，主要是处理复杂环境下进度条的精准度问题。

红影 发表于 2022-2-14 11:30

试了一下，拖动很方便。黑黑好棒{:4_187:}

红影 发表于 2022-2-14 11:32

真的能变成分秒的样式现实的呢，这些代码真神奇。不过，干嘛倒计时啊，正累加多好{:4_173:}

加林森 发表于 2022-2-14 12:26

老黑制作得真实太漂亮了。真不容易啊。{:4_199:}

马黑黑 发表于 2022-2-14 12:28

红影 发表于 2022-2-14 11:32
真的能变成分秒的样式现实的呢，这些代码真神奇。不过，干嘛倒计时啊，正累加多好

倒计时也挺好的，网页那个也是倒计时的吧

马黑黑 发表于 2022-2-14 12:28

加林森 发表于 2022-2-14 12:26
老黑制作得真实太漂亮了。真不容易啊。

{:4_190:}

加林森 发表于 2022-2-14 12:32

马黑黑 发表于 2022-2-14 12:28


谢茶

红影 发表于 2022-2-14 14:05

马黑黑 发表于 2022-2-14 12:28
倒计时也挺好的，网页那个也是倒计时的吧

是啊，很有特点{:4_204:}

千羽 发表于 2022-2-14 19:38

小辣椒 发表于 2022-2-14 01:08
@千羽

这个是单曲播放器

嗯，我试了，成功{:4_187:}

千羽 发表于 2022-2-14 19:39

，很好用，我收藏了{:4_187:}

千羽 发表于 2022-2-14 19:39

谢谢马黑黑老师{:4_187:}

马黑黑 发表于 2022-2-15 08:50

千羽 发表于 2022-2-14 19:39
谢谢马黑黑老师

{:4_191:}

加林森 发表于 2022-2-20 11:07

继续来学习。
页: [1]
查看完整版本: 单曲可控进度播放器：不知这样可不可以