论坛 › 马黑黑教程专版 › 假响应式频谱再测试

马黑黑 发表于 2024-8-23 19:14

假响应式频谱再测试

<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://yinpin.s3-us-east-1.ossfiles.com/lyria.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 19:16

代码：<style>
        #papa { margin: 30px auto 0; padding: 10px; width: 800px; 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://yinpin.s3-us-east-1.ossfiles.com/lyria.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 19:17

音频波形数据的获取请访问：获取本地音频波形数据 (52qingyin.cn)

起个网名好难 发表于 2024-8-23 19:49

马黑黑 发表于 2024-8-23 19:16
代码：欢迎修改代码，若有更逼真的做法，敬请分享，谢谢！

有这么多的数据就不假了{:5_117:}

马黑黑 发表于 2024-8-23 19:55

起个网名好难 发表于 2024-8-23 19:49
有这么多的数据就不假了

还是假的，只取了一个波形数据

起个网名好难 发表于 2024-8-23 19:59

马黑黑 发表于 2024-8-23 19:55
还是假的，只取了一个波形数据

要能突破跨域就好了

马黑黑 发表于 2024-8-23 20:11

起个网名好难 发表于 2024-8-23 19:59
要能突破跨域就好了

当前的浏览器策略下，通过JS实现几乎不可能的，除非有这样的空间。之前的棱束链，随便设置一下就可以，现在也不行了，交钱也不行。

小辣椒 发表于 2024-8-23 20:49

我去试一下

小辣椒 发表于 2024-8-23 20:54

马黑黑 发表于 2024-8-23 19:17
音频波形数据的获取请访问：获取本地音频波形数据 (52qingyin.cn)

一直音频数据处理中。。。。。

红影 发表于 2024-8-23 21:00

其实已经很真了，因为有波形数据在，已经很不错了{:4_187:}

马黑黑 发表于 2024-8-23 21:12

小辣椒 发表于 2024-8-23 20:54
一直音频数据处理中。。。。。

点一下左上角“选择音乐”，然后，你知道的

红影 发表于 2024-8-23 21:12

记得原来有个定稿版，还置顶了，刚才在置顶里没找到。后来取消置顶了吧{:4_173:}

马黑黑 发表于 2024-8-23 21:12

红影 发表于 2024-8-23 21:12
记得原来有个定稿版，还置顶了，刚才在置顶里没找到。后来取消置顶了吧

我没动过

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

马黑黑 发表于 2024-8-23 21:12
点一下左上角“选择音乐”，然后，你知道的

就这样操作的，是不是音乐不能用中文名字？

马黑黑 发表于 2024-8-23 21:15

红影 发表于 2024-8-23 21:00
其实已经很真了，因为有波形数据在，已经很不错了

不一样的。真响应式的，每一条频谱对应的音波数据都是事实获取的，假响应式的，从一个声道的数据中扩展出来

马黑黑 发表于 2024-8-23 21:17

小辣椒 发表于 2024-8-23 21:14
就这样操作的，是不是音乐不能用中文名字？

与中文名无关，都支持的。你换一个浏览器。

红影 发表于 2024-8-23 21:17

马黑黑 发表于 2024-8-23 21:12
我没动过

是这个
https://www.huachaowang.com/forum.php?mod=viewthread&tid=65156&highlight=%D2%F4%C6%B5%B2%A8%D0%CE%CA%FD%BE%DD

是我取消的，你嫌置顶太多了{:4_173:}

红影 发表于 2024-8-23 21:18

马黑黑 发表于 2024-8-23 21:15
不一样的。真响应式的，每一条频谱对应的音波数据都是事实获取的，假响应式的，从一个声道的数据中扩展出 ...

已经能大致模拟了{:4_187:}

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

马黑黑 发表于 2024-8-23 21:17
与中文名无关，都支持的。你换一个浏览器。

好的，换个百分百

马黑黑 发表于 2024-8-23 21:22

小辣椒 发表于 2024-8-23 21:18
好的，换个百分百

看看行不行，不行的话可能是没缘分。

查看完整版本: 假响应式频谱再测试