测试：音频可视化
<style>#canv { margin: 50px auto 0; display: block; position: relative; background: #000; cursor: pointer; }</style><audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1668786727519986.mp3" autoplay loop crossOrigin="anonymous"></audio>
<canvas id="canv" width="600" height="300"></canvas>
<script>
(function () {
let Act = new AudioContext();
let audSrc = Act.createMediaElementSource(aud);
let analyser = Act.createAnalyser();
audSrc.connect(analyser);
analyser.connect(Act.destination);
let ctx = canv.getContext('2d');
let width = canv.width;
let height = canv.height;
let ppColor = ctx.createLinearGradient(400,300,400,0);
ppColor.addColorStop(0, 'hsla(120,50%,40%,.85)');
ppColor.addColorStop(0.3, 'hsla(30,100%,50%,.75)');
ppColor.addColorStop(1, 'hsla(0,100%,50%,.65)');
let ppNum = 50;
let voiceHeight = new Uint8Array(analyser.frequencyBinCount);
(function draw() {
analyser.getByteFrequencyData(voiceHeight);
let step = Math.round(voiceHeight.length / ppNum);
ctx.clearRect(0, 0, width, height);
for (let j = 0; j < ppNum; j++) {
let audiheighteight = voiceHeight;
ctx.fillStyle = ppColor;
ctx.fillRect(width / 2 + (j * 8), height, 4, -audiheighteight);
ctx.fillRect(width / 2 - (j * 8), height, 4, -audiheighteight);
}
window.requestAnimationFrame(draw);
})();
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
周边疫情严重，宅家无聊，仔细读读相关 Web Audio API，主要是这个：
https://webaudio.github.io/web-audio-api/#AudioContext
看的眼花缭乱，一个头两个大。audio API博大精深，知识点浩如烟海，还得再加油。
一楼，参考了多位大佬的研究，简单弄了个可随音频律动产生变化的频谱。
弄的艰难。主要是关于音频来源的跨域问题，研究这个API的大佬几乎没人提及，鼓捣了好久，最后给HTML5的audio控件加个属性，crossOrigin="anonymous"，如此，AudioContext才不抛出错误。如果在本地测试，需要开启虚拟服务器，网页需要存在虚拟目录或子目录下，调试时用本机虚拟服务器地址，支持使用本地虚拟目录或子目录的音频。
一楼的实现机制是 AudioContext 挂接 HTML5 audio 控件，audio播放音乐，AudioContext 从它那获取相关数据，通过一系列的操作，得到“音高”数据，然后在画布上驱动频谱。 音质不错，听一会~~{:4_190:} 大神，终于这个音频出来了{:4_178:} 赶快呼叫小风@风中风尘 小辣椒 发表于 2022-12-1 19:44
赶快呼叫小风@风中风尘
别高兴太早，现在只是入门级别，非常非常简单的驱动 小辣椒 发表于 2022-12-1 19:42
大神，终于这个音频出来了
它对音乐来源有特殊要求：同域。打比方说，论坛发帖，如果使用这个效果，最好是同域名的音乐，不然要看人家脸色——它的音乐是开放的，但不见得源策略也是开放的（像网易云音乐、酷美网盘都不开放源策略），即使使用了跨域处理也不见得可行。 醉美水芙蓉 发表于 2022-12-1 20:01
黑黑老师创作辛苦了！
{:4_190:} 马黑黑 发表于 2022-12-1 19:53
它对音乐来源有特殊要求：同域。打比方说，论坛发帖，如果使用这个效果，最好是同域名的音乐，不然要看人 ...
那这个对我没有问题，大部分人不行要跨越音频才可以玩 马黑黑 发表于 2022-12-1 16:49
周边疫情严重，宅家无聊，仔细读读相关 Web Audio API，主要是这个：
https://webaudio.github.io/web-a ...
全外文的啊，而且那么多内容，打开网页就已经晕了{:4_173:} 马黑黑 发表于 2022-12-1 19:53
它对音乐来源有特殊要求：同域。打比方说，论坛发帖，如果使用这个效果，最好是同域名的音乐，不然要看人 ...
其实以前玩swf频谱也是要同域的，记得当时我师父写了个跨越代码加进去就可以了 马黑黑 发表于 2022-12-1 19:46
别高兴太早，现在只是入门级别，非常非常简单的驱动
那我们慢慢来，反正这么多封装播放器还没有做的 虽然这个解说很复杂，但是频谱能跟着音高延展跳跃，就是成功呢，黑黑辛苦{:4_204:} 红影 发表于 2022-12-1 20:27
虽然这个解说很复杂，但是频谱能跟着音高延展跳跃，就是成功呢，黑黑辛苦
它对音乐来源要求很高：如果涉及到跨域问题，凡网站源策略不开放，音乐可以共享也不行。源策略是否开放，是音乐所在服务器的事情，所以要先试音乐，不抛出错误警告的就好。 小辣椒 发表于 2022-12-1 20:19
那我们慢慢来，反正这么多封装播放器还没有做的
这个 audiocontext 对音乐来源挑剔，我目前试过的，能通得过的不多，本机开个虚拟服务器自己玩玩还可以 小辣椒 发表于 2022-12-1 20:18
其实以前玩swf频谱也是要同域的，记得当时我师父写了个跨越代码加进去就可以了
我这里已经加跨域了，但不是说跨域就可以跨域，人家不开门你怎么跨？ 红影 发表于 2022-12-1 20:16
全外文的啊，而且那么多内容，打开网页就已经晕了
{:4_172:} 小辣椒 发表于 2022-12-1 20:16
那这个对我没有问题，大部分人不行要跨越音频才可以玩
但你在自己的机器上无法测试效果，做完了要上传才行