测试：音频可视化

马黑黑

马黑黑

周边疫情严重，宅家无聊，仔细读读相关 Web Audio API，主要是这个：

https://webaudio.github.io/web-audio-api/#AudioContext

马黑黑

看的眼花缭乱，一个头两个大。audio API博大精深，知识点浩如烟海，还得再加油。

一楼，参考了多位大佬的研究，简单弄了个可随音频律动产生变化的频谱。

弄的艰难。主要是关于音频来源的跨域问题，研究这个API的大佬几乎没人提及，鼓捣了好久，最后给HTML5的audio控件加个属性，crossOrigin="anonymous"，如此，AudioContext才不抛出错误。如果在本地测试，需要开启虚拟服务器，网页需要存在虚拟目录或子目录下，调试时用本机虚拟服务器地址，支持使用本地虚拟目录或子目录的音频。

一楼的实现机制是 AudioContext 挂接 HTML5 audio 控件，audio播放音乐，AudioContext 从它那获取相关数据，通过一系列的操作，得到“音高”数据，然后在画布上驱动频谱。

朵拉

音质不错，听一会~~

小辣椒

大神，终于这个音频出来了

小辣椒

赶快呼叫小风@风中风尘

马黑黑

小辣椒 发表于 2022-12-1 19:44
赶快呼叫小风@风中风尘

别高兴太早，现在只是入门级别，非常非常简单的驱动

马黑黑

小辣椒 发表于 2022-12-1 19:42
大神，终于这个音频出来了

它对音乐来源有特殊要求：同域。打比方说，论坛发帖，如果使用这个效果，最好是同域名的音乐，不然要看人家脸色——它的音乐是开放的，但不见得源策略也是开放的（像网易云音乐、酷美网盘都不开放源策略），即使使用了跨域处理也不见得可行。

马黑黑

醉美水芙蓉 发表于 2022-12-1 20:01
黑黑老师创作辛苦了！

小辣椒

马黑黑 发表于 2022-12-1 19:53
它对音乐来源有特殊要求：同域。打比方说，论坛发帖，如果使用这个效果，最好是同域名的音乐，不然要看人 ...

那这个对我没有问题，大部分人不行要跨越音频才可以玩

红影

马黑黑 发表于 2022-12-1 16:49
周边疫情严重，宅家无聊，仔细读读相关 Web Audio API，主要是这个：

https://webaudio.github.io/web-a ...

全外文的啊，而且那么多内容，打开网页就已经晕了

小辣椒

马黑黑 发表于 2022-12-1 19:53
它对音乐来源有特殊要求：同域。打比方说，论坛发帖，如果使用这个效果，最好是同域名的音乐，不然要看人 ...

其实以前玩swf频谱也是要同域的，记得当时我师父写了个跨越代码加进去就可以了

小辣椒

马黑黑 发表于 2022-12-1 19:46
别高兴太早，现在只是入门级别，非常非常简单的驱动

那我们慢慢来，反正这么多封装播放器还没有做的

红影

虽然这个解说很复杂，但是频谱能跟着音高延展跳跃，就是成功呢，黑黑辛苦

马黑黑

红影 发表于 2022-12-1 20:27
虽然这个解说很复杂，但是频谱能跟着音高延展跳跃，就是成功呢，黑黑辛苦

它对音乐来源要求很高：如果涉及到跨域问题，凡网站源策略不开放，音乐可以共享也不行。源策略是否开放，是音乐所在服务器的事情，所以要先试音乐，不抛出错误警告的就好。

马黑黑

小辣椒 发表于 2022-12-1 20:19
那我们慢慢来，反正这么多封装播放器还没有做的

这个 audiocontext 对音乐来源挑剔，我目前试过的，能通得过的不多，本机开个虚拟服务器自己玩玩还可以

马黑黑

小辣椒 发表于 2022-12-1 20:18
其实以前玩swf频谱也是要同域的，记得当时我师父写了个跨越代码加进去就可以了

我这里已经加跨域了，但不是说跨域就可以跨域，人家不开门你怎么跨？

马黑黑

红影 发表于 2022-12-1 20:16
全外文的啊，而且那么多内容，打开网页就已经晕了

马黑黑

小辣椒 发表于 2022-12-1 20:16
那这个对我没有问题，大部分人不行要跨越音频才可以玩

但你在自己的机器上无法测试效果，做完了要上传才行