今天尝试給一张音乐卡片增加可视化效果，翻了下mdn上有个叫做web audio api的接口。
请chatgpt兄写了一个样例。试了下发现问题，audio正常播放，但一启动可视化就没声音，波形也没出来。开始排查问题。
翻看控制台，有一段文字说由于cors限制，输出为0，再一看是我的播放地址有cors限制？
我是用的网易云音乐的外链，请求它会返回cdn链接，这个才是真的播放源。
我猜想可能真的播放源没有限制，于是想在前段拿到真的播放源。结果发现比想象中困难。
因为地址是通过302跳转的，以前不了解，研究发现这个跳转是浏览器直接做的，在vue这边axios或fetch都拿不到302相应体里的header中的location。
那换个思路，后端搭反向代理，但我试了许久，并不知道反向代理如何把响应体中的location拿出来。
最后还是回到python，用request和fastapi写了个接口。结果运行总是变着花样报错。什么ssl错误，max retry等等，着实头大。
最后发现我把本机代理关掉后，稀里糊涂就能用了，也是醉了。
但是绝望的发现，似乎改用cdn地址也不行。
无奈之下随意google，结果发现了云音乐团队自己写的一篇指导web audio api的文章，关键里面有个codepen示例，发现把cdn地址粘过去，他那里就能用！遂又燃起了希望。
按着他的代码调整，添加了一行
crossOrigin="Anonymous"在关联的audio元素上，就不弹cors错误了。
最后在本地地址获取接口帮助下，成功实现了音乐可视化 可把我激动坏了。😂
8月9日更新：尽管技术上成功了，但是工作流并没有跑通。今天想到了原因，由于版权限制，网易云音乐对海外IP的访问是限制的，这就造成了我开着代理，或者url接口服务放在，海外服务器上，不管接口，还是浏览器，访问链接会报错。后端接口报404错误的原因就是这个。这么一来，音乐卡片这个思路还是很受限制。可惜了
发表回复