小辣椒 发表于 2024-8-23 21:38

测试看看是不是什么音乐都可以的


<style>
        #papa { margin: 30px auto 0; padding: 10px; width: 760px; height: 400px; background: linear-gradient(to bottom right,lightblue,tan); box-shadow: 3px 6px 20px #000; border-radius: 6px; position: relative; --tst: .17s; }
        #papa h2 { margin: 6px 0; color: snow; font: bold 1.6em sans-serif; text-align: center; text-shadow: 2px 2px 2px #000; }
        #mplayer { margin: auto; position: absolute; width: 100%; height: 160px; bottom: 10px; display: flex; justify-content: center; align-items: flex-end; }
        .mLine { position: relative; margin: 0 2px 0 0; width: 6px; min-height: 10px; max-height: 200px; background: gray linear-gradient(to top,lightgreen,green,lightgreen); transition: var(--tst); }
        .mLine::before, .mLine::after { position: absolute; content: ''; width: 100%; height: 3px; background: snow; top: 0; }
        .mLine::after { top: 100%; }
        .tMid { margin: 0; padding: 12px 0; text-align: center; }
</style>

<div id="papa">
        <h2>假响应式频谱 一抹伤 - 孙露</h2>
        <div id="mplayer"></div>
</div>
<p class="tMid"><audio id="aud" src="https://xlaj.cn/assets/file/zp/20240815231424.mp3" controls></audio></p>

<script>

var ypData = ;
var total = 40, lines = [], idx, len, step;

for(j=0; j < total; j++) {
        var el = document.createElement('span');
        el.className = 'mLine';
        mplayer.appendChild(el);
        lines.push(el);
}

plusOrMinus = () => Math.random() > 0.5 ? 1 : -1;

output = (all, num) => num === 0 ?
        Array(all).fill(0) :
        Array(all).fill(0).map(item => Math.ceil(Math.random() * num + plusOrMinus() * num / 2));

(function update() {
        var ar = output(total, aud.paused ? 0 : ypData);
        ar.forEach((a,k) => lines.style.height = ar + 'px');
        window.requestAnimationFrame(update);
})();

aud.addEventListener('timeupdate', () => {
        idx = Math.floor(aud.currentTime / step);
});

aud.addEventListener('canplay', () => {
        len = ypData.length;
        step = aud.duration / len;
        papa.style.setProperty('--tst', step + 's');
});

</script>

小辣椒 发表于 2024-8-23 21:39

@马黑黑

这次好像什么音乐都可以有音频出来的{:4_199:}

红影 发表于 2024-8-23 22:30

亲爱的做得真快，好听{:4_187:}

马黑黑 发表于 2024-8-23 23:04

小辣椒 发表于 2024-8-23 21:39
@马黑黑

这次好像什么音乐都可以有音频出来的

就是你的浏览器对俺的网站有偏见{:4_189:}

四海八荒 发表于 2024-8-24 05:56

听歌{:4_178:}

梦油 发表于 2024-8-24 09:29

欣赏美曲 ，问候小辣椒。

亚伦影音工作室 发表于 2024-8-24 10:41

小辣椒 发表于 2024-8-23 21:39
@马黑黑

这次好像什么音乐都可以有音频出来的

当然了，本来就有频谱资源，所以任何mp3都适合，只是不标准！

岁月·如歌 发表于 2024-8-29 21:09

这乱蹦乱跳的就叫频谱，真会起名。还是你们文化人会玩{:4_199:}{:4_189:}

愤怒的葡萄 发表于 2024-8-29 21:12

来欣赏听歌了。
页: [1]
查看完整版本: 测试看看是不是什么音乐都可以的