论坛 › 动画音画 › 原创花潮论坛微型播放器[欢迎使用]

亚伦影音工作室 发表于 2026-9-21 13:33

原创花潮论坛微型播放器[欢迎使用]

本帖最后由 亚伦影音工作室 于 2026-9-21 16:10 编辑 <br /><br /><style>
#pa{
    margin: 120px 0 30px calc(50% - 350px);
    width: 550px;
    height: 120px;
background:#fff;
border-radius: 58px;
    box-shadow:0px 0px 0px 2px #00aa00, 0px 0px 0px 8px #880000;
    user-select: none;
    display: grid;
      place-items: center;
    overflow: hidden;
    position: relative;
    z-index: 1;--state: paused;
}

#tp{position:absolute;width: 100%;height: 100%;left: 0px;top: 0px;}
#cp {position: absolute;width:116px; height:116px;top: 2px; left: 2px;z-index: 1; transition: 0.25s;border-radius: 50%;box-shadow:0px 0px 0px 3px #cccccc; animation:tion3s linear 1.5s infinite var(--state) }
#ccp {position: absolute;width:116px; height:116px;top: 2px; right: 2px;z-index: 1; transition: 0.25s;border-radius: 50%;box-shadow:0px 0px 0px 3px #cccccc; animation:tion3s linear 1.5s infinite var(--state) }
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#bnt{left:40%;top: 15%;width: 100px;height: 40px;position: absolute;filter: invert(0%); cursor: pointer;z-index: 61}

#tmsg {position: absolute;
      font:100 20px/0px "华文行楷","SimHei", "Arial", "sans-serif";
      color: #fff;
         bottom: 36px;
      left:40%;}
#prog {position:absolute;
      width: 48%;
      height: 3px;background:#aaa;
      cursor: pointer;
         bottom: 20px;border-radius: 10px;
left:25%;}
#prog-bar {border-radius: 20px;
            height: 100%;
            background: #FF0000;
            width: 0%;
      }
    </style>
<div id="pa">

<img src="https://pic1.imgdb.cn/item/69e5e442198dd6f8d6ac9407.png"id="cp" />
<img src="https://pic1.imgdb.cn/item/69e5e442198dd6f8d6ac9407.png"id="ccp" />
<img id = "bnt" src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png">
<img id="tp"src = "https://pic1.imgdb.cn/item/69b4fee50ee6511f188aa107.gif">
<div id="tmsg">00:00/00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
            </div>

            <audio id="aud" src="http://music.163.com/song/media/outer/url?id=3389354291.mp3" loop autoplay></audio>
    <script>         
            var mState = () => aud.paused ?
( bnt.style.setProperty( 'paused'),bnt.title = '点击播放' ) :
( bnt.style.setProperty( 'running'),bnt.title = '点击暂停' );
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
bnt.addEventListener('click', () => {
    if (aud.paused) {
      aud.play();
      bnt.src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png";
      tp.src = "https://pic1.imgdb.cn/item/69b4fee50ee6511f188aa107.gif";
    } else {bnt.src = "https://pic1.imgdb.cn/item/6a47a5751f8fda9783decc81.png";
      aud.pause();
      tp.src = "https://pic1.imgdb.cn/item/6a485ec61f8fda9783e197d8.jpg";
    }
});
(function() {
      
      var mState = () => {pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();

})();

prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
aud.addEventListener('timeupdate', () => {
          varpercent= (aud.currentTime / aud.duration) * 100;
            progBar.style.width = percent + '%';
      });

aud.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});


let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
      </script>

杨帆 发表于 2026-9-21 13:39

精致别致好制作，谢谢亚伦老师精彩分享{:4_190:}

红影 发表于 2026-9-22 03:39

漂亮的制作，欣赏亚伦老师好帖{:4_187:}

查看完整版本: 原创花潮论坛微型播放器[欢迎使用]