论坛 › 欢乐水吧 › 高仿抖音金属感小波[原创]

亚伦影音工作室 发表于 2026-4-21 14:47

高仿抖音金属感小波[原创]

本帖最后由 亚伦影音工作室 于 2026-4-24 06:45 编辑 <br /><br /><style>
#xiaobo {z-index: 100;
      width: 350px;
      height: 212px;
      margin: 20px 240px;
      position: relative;
      overflow: hidden;
      --state:paused;
      }
   #circle {z-index: 2;
      width: 210px;border: 2px solid #333;
      height: 210px;
      margin: 0px auto;
      position: absolute;
      background:#8E731B url(https://pic1.imgdb.cn/item/64ec353c661c6c8e54c461e0.jpg)no-repeat center/cover;
      border-radius: 8px;mask: radial-gradient(circle at 98% 50%,transparent 45px,#red 0%);-webkit-mask: radial-gradient(circle at 98% 50%,transparent 45px,red 0%);
      }
         #cp {z-index: -1;
position: absolute;
transition: all 1s;
top: 4px;left: 106px;
width: 200px; height: 200px;
   border: 2px solid #000;
    border-radius: 50%;background:#000 url(https://pic1.imgdb.cn/item/69e5e442198dd6f8d6ac9407.png) no-repeat 0px 0px/cover;
    animation: rot 3s   linear infinite var(--state); cursor: pointer;

}
    @keyframes rot {0%{ transform: rotate(0deg);opacity: 1;}100%{ transform: rotate(360deg);opacity: 1;}}

#cp:before{
      position: absolute;
      content: ""; opacity: 1;
                animation: boxanimation 8sease forwards;
        }

        @keyframes boxanimation {
                0% {opacity: 1;
                        transform: translateX(-40px)}

99% {opacity: 1;
                        transform: translateX(100px)
                }
                100% {opacity: 0;
                        transform: translateX(100px)
                }
        }

#bnt{margin: 160px 20px ; width: 25px; height: 25px;position: relative; cursor: pointer; z-index: 100;transition: all 1s;}
#cndpt{position: absolute; width: 100%; height: 100%;
background:#eee;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 100%; height: 100%;
opacity:0; background:#eee;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}
#progressBar{width:600px;height:30px;background:#aaa;margin-top:10px;position: relative;}
                        #playProgressBar{position: absolute;top:0;left:0;background:#B99329;height:30px;width:0px;cursor: pointer;}
                        #ptxt{width:100%;height:30px;text-align:center;font-size:16px;line-height: 30px;z-index: 10;position: absolute;}
                        #tmsg {position: relative;z-index: 8;cursor: pointer;
      font: normal 12px sans-serif;
      color: #000;
         bottom: 0px;
      left:500px;}
</style>
<div id="xiaobo">
    <div id="circle"></div>
      <div id="cp"></div>
      <div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
</div>
<button onclick="play()">播放</button>
                <button onclick="pause()">暂停</button>
                <buttononclick="next()">下一曲</button>
                <buttononclick="prev()">上一曲</button>
                <div id="tmsg">00:00/00:00</div>
                <div id="progressBar">
                        <div id="ptxt">0%</div>
                        <div id="playProgressBar"></div>
                </div>
<div id="playlist">
       <Ii id="list" > <p class="item" id="ltem" onclick="py('http://img0.oldkids.cn/upload/2021/06/20/blog_260855907_20210620113141577.mp3')" >1.红颜知己</p> </Ii>
       <Ii id="list"> <p class="item"id="ltem" onclick="py('https://s2.ananas.chaoxing.com/sv-w7/audio/17/a4/2f/da1aa41f467563df8304f74152c55a4f/audio.mp3')" >2.为你祈祷</p></Ii>
      <Ii id="list"><p class="item"id="ltem" onclick="py('https://img2.oldkids.cn/upload/2026/04/10/blog_260855907_20260410154234661.mp3')" >3.为你醉一回</p></Ii>
    </div>


<audio id="aud"   autoplay ></audio>

<script>
var mState = () => audio.paused ?
( xiaobo.style.setProperty('--state', 'paused'),bnt.title = '点击播放' ) :
( xiaobo.style.setProperty('--state', 'running'),bnt.title = '点击暂停' );

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
bnt.onclick = () => aud.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',cp.style.left = '106px') : (aud.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',cp.style.left = '40px');

</script>
<script>
                var arrys = ["http://img0.oldkids.cn/upload/2021/06/20/blog_260855907_20210620113141577.mp3","https://s2.ananas.chaoxing.com/sv-w7/audio/17/a4/2f/da1aa41f467563df8304f74152c55a4f/audio.mp3","https://img2.oldkids.cn/upload/2026/04/10/blog_260855907_20260410154234661.mp3"];
                        var audio =document.getElementById("aud");
                        var i = 0;

aud.addEventListener("ended", function() {
            if (arrys) {
                this.src = arrys;
                i++;

            } else { aud.play();
                }
      });
function   py(src) {
      var audio= document.getElementById('aud');
aud.src =src;
}

        document.getElementById('ltem').addEventListener('click', function() {
this.classList.add('clicked');});
      
               
                var currMp3 = arrys;
                        aud.src = arrys;
function toMin(val) {
            if (!val) return '00:00';
            val = Math.floor(val);
            let min = parseInt(val / 60);
            let sec = parseFloat(val % 60);
            if (min < 10) min = '0' + min;
            if (sec < 10) sec = '0' + sec;
            return min + ':' + sec;
      }
      aud.addEventListener("timeupdate",function(){
                                var percent= aud.currentTime / aud.duration
                                var sp = 600 / 100 ;
                                var swidth =(percent * 100 * sp) + "px";
                                console.log(percent*100,swidth)
tmsg.innerText = toMin(aud.currentTime) + '/' + toMin(aud.duration);
progressBar.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / progressBar.offsetWidth; }
document.getElementById("playProgressBar").style.width = swidth;
progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    })
document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
        })

                        function prev(){
                                var tmpMp3 = "";
                                arrys.forEach(function(item,index){
                                        if(item == currMp3){
                                                if(index == 0){
                                                        //
                                                        tmpMp3 = arrys;
                                                }else{
                                                        //
                                                        tmpMp3 = arrys;
                                                }
                                                console.log(tmpMp3)
                                                aud.src = tmpMp3;
                                                setTimeout(function(){
                                                        play()
                                                        currMp3 = tmpMp3;
                                                },500)
                                                return ;
                                        }
                                })
                        }
                       
                        //
                        function next(){
                                var tmpMp3 = "";
                                arrys.forEach(function(item,index){
                                        if(item == currMp3){
                                                if((index+1)>arrys.length-1){
                                                       
                                                        tmpMp3 = arrys;
                                                }else{
                                                       
                                                        tmpMp3 = arrys;
                                                }
                                                console.log(tmpMp3)
                                                aud.src = tmpMp3;
                                                setTimeout(function(){
                                                        play()
                                                        currMp3 = tmpMp3;
                                                },500)
                                                return ;                                }
                                })
                        }
                //
                        function play(){
                                aud.play();cp.style.left = '106px';
enopg.style.opacity= '0';cndpt.style.opacity = '1';
                        }
                //
                        function pause(){
                                aud.pause();cp.style.left = '40px';
enopg.style.opacity= '1';cndpt.style.opacity = '0';
                        }
                        console.dir(aud)
                       
                        </script>
<style>
#playlist{position: relative; top: -280px;
left: 30px;
width:400px;height:200px; font:800 1.2em/2em 仿宋;}

#list{column-count: 2;
list-style: none;
padding:0;
font:800 1.2em/2em 仿宋;
overflow-x: hidden;
}
.item{list-style: none;
padding: 0.2rem 1rem;
color: #000;
cursor: pointer;
}

.item:hover{
color: #00ff00;
}
#list:active { list-style: none;
color:#ff0000;
text-decoration:none;
}

</style>

杨帆 发表于 2026-4-21 16:47

动画流畅有创意，谢谢亚伦老师精彩分享{:4_191:}

红影 发表于 2026-4-21 21:03

这小播真的很有金属质感呢。漂亮{:4_187:}

红影 发表于 2026-4-21 21:09

可以直接点曲名选择，还可以用按钮选择歌曲，进度条有数字显示还有百分比显示，暂停小播可缩入。
这个帖子功能很多，这制作真好，给亚伦老师点赞{:4_199:}

朵拉 发表于 2026-4-21 21:49

特别赞的制作，向亚伦老师学习{:4_204:}

老谟深虑 发表于 2026-4-23 19:09

         老师制作的真好，点赞！

查看完整版本: 高仿抖音金属感小波[原创]