论坛 › 欢乐水吧 › 马黑老师的小频谱我试试

亚伦影音工作室 发表于 2024-12-9 14:42

马黑老师的小频谱我试试

本帖最后由 亚伦影音工作室 于 2024-12-22 06:56 编辑 <br /><br /><style>
#cndpt{margin: 0px 30px ; opacity:1;
    position: relative;width: 540px; height: 320px;cursor: pointer;
    background: url(https://pic.imgdb.cn/item/643dbb490d2dde5777df1d3c.gif)no-repeat 155px 150px/40%,url(https://pic.imgdb.cn/item/67503954d0e0a243d4dd6efd.gif)no-repeat center/80%; }
#enopg{
    position: relative;width:100%; height:100%;cursor: pointer;
   background: url(https://pic.imgdb.cn/item/67567c91d0e0a243d4e0366f.png)no-repeat 155px 150px/40%, url(https://pic.imgdb.cn/item/67557857d0e0a243d4dffca0.png) no-repeat center/80%;
    display:none;
}
#prog {position: absolute;
        left:17%;
        width: 67%;
      height: 1px;background:#aaa;
      cursor: pointer;
         bottom: 100px;
border-radius: 1px;}
#prog-bar {
            height: 100%;
            background: #111;
            width: 0%;
      }

#tmsg {position: absolute;z-index: 1;
      font: 500 14px sans-serif;
      color: #aaa;
         bottom: 162px;
      left:42%;}
#but {width:100%; height:100%;top:0%; left:0%;cursor: pointer;width:100%; height:100%;position: absolute;}
#pa{
        left:24%;
top: 30px;
        width: 300px;
        height: 100px;
        color: cyan;
        position: absolute;
        display: grid;
        place-items: center;
}
.pp {
        position: absolute;
        width: 1px;
        min-height: 2px;
        transform-origin: 0 50%;
        transition: height .16s linear;
        display: grid;
        place-items: start center;
}

</style>
<div id="cndpt"title="播放/暂停">
<div id="tmsg">正在计时......</div>
<div id="enopg"></div>
<div id="prog" ><div id="prog-bar"></div></div>
<span id="but" onclick="pic()"><div id="pa"></div></span>

</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/c1/10/5c/1b1915470377d5a409ec4b72dcfc901b/audio.mp3" autoplay loop></audio>
<script >
function pic(){
    varimgElement= document.getElementById('enopg');
    if (imgElement.style.display === 'none' || imgElement.style.display === '') {
       imgElement.style.display = 'block';
    } else {
    imgElement .style.display = 'none';
    }
}
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 ;
      };
cndpt.onclick = () => aud.paused ?(aud.play()):(aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

const tt = Math.floor(pa.clientWidth / 4 - 5);
let pps = [];
Array(tt).fill('').forEach((_,k) => {
        let sp = document.createElement('span');
        sp.className = 'pp';
        sp.style.cssText += `
                left: ${10 + 4* k}px;
                background: linear-gradient(to bottom, #ccc, #00ff00,#ccc);
        `;
        pps.push(sp);
        pa.prepend(sp);
});

(function update() {
                let output = [...new Array(tt).keys()].map((v,k) => Math.floor(Math.random() * (aud.paused ? 0 : 80 - Math.random() * 160)));
                for(let j = 0; j < tt ; j++) {
                        pps.style.height = output + 'px';
                }
                window.requestAnimationFrame(update);
        })();

</script >

起个网名好难 发表于 2024-12-9 15:04

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

红影 发表于 2024-12-9 20:20

这个磁带加上小频谱也很漂亮呢，亚伦老师还在原来的基础上加了个小鸟树枝的动图{:4_187:}

红影 发表于 2024-12-9 20:21

修改一下小频谱的颜色，可能更漂亮呢{:4_204:}

绿叶清舟 发表于 2024-12-9 20:41

这个卡带太逼真了{:5_116:}

朵拉 发表于 2024-12-9 23:03

亚伦老师的制作棒，赞一个{:4_204:}

查看完整版本: 马黑老师的小频谱我试试