图片来源：Chrome插件Yunyinle听歌曲
本文的作者：Kongwu
当您使用网页在视频网站上刷视频时，您是否遇到了引起内部波浪的BGM，但您不知道它的名称。这次，您只能打开手机来收听歌曲，并且更容易通过浏览器插件来解决此问题。不需要乏味地拿出手机，也不会干扰他人，因为它需要释放，更不用说由于环境噪音而确定困难。
如果您碰巧有这种需求，请尝试使用Yun Music制作的Chrome浏览器插件 - Yun Yinle聆听歌曲，您也可以直接收集红色的心收藏。预览实际操作的实际效果。
目前，Chrome商店中的大多数听力和知识插件都是由外国生产的，而家用产品很少。它对家庭音乐的支持很差。由于Yun音乐具有这种能力，我们希望涵盖此功能以覆盖每个角落并传达音乐的美丽力量。在同一时间，市场上的大部分插件仍在实施基于清单V2（与清单V3，安全性差，性能和隐私相比），一般方法是将音频记录直接移交给服务器，并通过服务器端执行指纹进行指纹。服务器增加压力并增加网络传输。因此，是否有一种方法可以使用清单V3协议来实现该功能，同时，将音频指纹提取放置在前端？
本文的重点不是实现浏览器插头本身。如果您不了解插件本身的开发，则可以检查Google的官方开发文档。
特别解释的是，清单V2（MV2）即将被放弃，并且逐渐不接受2022年的更新。它将在2023年逐渐无法运行。本文的所有内容均基于更安全，更好的性能（MV3）实施。
协议升级还可以为该函数的实现带来一些更改，因为MV3更安全，并且一些不安全的方法，例如MV2的灵活实现（例如：执行远程代码，您可以使用eval，新功能（。..）和其他不安全的方法）不会使用它。这将带来一些实现困难来聆听歌曲。
核心影响点上的MV3协议在实现插件-in的实现：
浏览器插件中的音频提取实际上非常简单，可以在网页上录制音频和视频录制。您只需要API即可获得网页本身的录音。我们需要对音频数据进行采样，以确保将数据库数据的规则计算一致。
对于所获得的流流，可以转录和采样音频。通常有三种处理方法：
Audiooorkletnode的方法实现了音频样本和采样持续时间控制方法：
init（callback）{this.callback = callback;this.port.onmessage =（event）=> this.onmessage（event.data）;}
onMessage（event）{if（event.type ==='getData'）{if（this.callback）{this.callback（event.result）;}}}}}}}}
const node = new PitchNode（Audio_ctx，“ PitchProcessor”）;
以收集数字信号的第一个输入通道的第一个通道，并在收集定义长度后将信号识别处理收集到主线程（例如48000此处）。
根据方法，您可以进行许多有趣的尝试，例如最基本的白噪声产生。
从音频信号中提取音频指纹提取后，下一步是使指纹提取信号数据。我们提取的实际上是二进制数据的一部分。傅立叶变换需要转换为频域信息的特征表示。特定指纹提取的逻辑是一组常规复杂算法。常规的指纹提取方法：1）基于频带能量的音频指纹；您可以读取相关论文，例如：高度强大的音频指纹系统。整个操作都有一定的性能要求。对于WebAssembly进行操作，它可以获得更好的CPU性能。TODAY，C ++/C/RUST具有一种相对方便的方式来编译到WebAssembly字节码中，在这里不会扩展。
接下来，当您尝试在插件场景中初始化WASM模块时，您可能会有以下异常：
这是因为当使用WebAssembly时，您需要遵循严格的CSP定义，并且可以通过添加语句来解决Chrome MV2的声明。在MV3上，由于严格的隐私和安全性限制，已允许这种简单而粗鲁的执行方法.in mv3，只有定义插件的定义的允许值是：
换句话说，此安全性在沙盒模式下受到限制。插头 - 本身可以定义沙盒页面。尽管此页面无法访问Web/Chrome API，但它可以运行一些如此符合的“不安全”方法，例如。因此，您可以使用Sandbox页面加载并运行WASM模块，将计算结果返回到主页，总体指纹收集过程如下所示：
对于主页和沙盒页面上的数据通信，您可以使用iframe的ContentWindow和主窗口来通过在主页上加载iframe来执行数据连接。数据过程如下：图：
此时，基本的音频提取和指纹提取过程已经完成。其余部分是通过指纹匹配功能。
在特征性匹配的音频指纹之后，下一步是在指纹库中进行音频检索。指纹库可以在传播列表中实现。每个表项代表与同一指纹相对应的音乐ID和音乐的时间，并构建了指纹数据库。访问数据库的指纹可以获得匹配的歌曲。当然，这只是一个基本过程。特定算法优化方法仍然非常不同。除了版权原因外，该算法还直接导致每种匹配的效率和准确性。插头的实现仍然是有效的。
以上通常描述了基于聆听MV3的实现的一般过程。尽管插头很灵活且易于使用，但Google还实现了插件带来的一些安全性和隐私问题，因此很大 -比例迁移。MV3协议是更多的隐私和安全性，但它也限制了许多功能的实现。2023年之后，将有大量无法使用的插头。
当前收听歌曲和素养的歌曲的完成包括音频识别，红色的歌曲收集等，并将在将来继续扩展功能扩展。我希望这个小型功能可以为您提供帮助。
本文是从NetEase Cloud Music Technology团队发行的，该文章将在未经任何授权的情况下复制。我们全年招募各种技术职位。如果您要更改工作，就像云音乐一样，请加入我们的grp.music-fe（at）corp.netease.com！
原始：https：//juejin.cn/post/7094083239702659109