音频功能使用记录

1.音频录制

利用插件进行网页内的音视频录制其实非常简单，只需要 chrome.tabCapture API 即可实现网页本身的音频录制，获取到的流数据我们需要针对音频数据进行采样，保证计算 HASH 的规则和数据库数据保持一致。

针对获取的 stream 流可以进行音频的转录采样，一般有三种处理方式：

• createScriptProcessor：此方法用于音频处理最为简单，但是此方法已经在 W3C 标准里标记为废弃。不建议使用
• MediaRecorder：借助媒体 API 也可以完成音频的转录，但是没有办法做到精细处理。
• AudioWorkletNode：用于替代 createScriptProcessor 进行音频处理，可以解决同步线程处理导致导致的对主线程的压力，同时可以按 bit 进行音频信号处理，这里也选择此种方式进行音频采样。

使用 WebAssembly 的时候需要遵循严格的 CSP 定义，对于 Chrome MV2 可以通过追加 "content_security_policy":"script-src 'self' 'unsafe-eval';" 进行声明解决。而在 MV3 中，由于更加严格的隐私及安全限制，但是可以使用沙盒环境下解决

CSP modifications for sandbox have no such new restrictions. —— Chrome插件开发文档

插件本身可以定义 sandbox 页面，这种页面虽然无法访问 web/chrome API，但是它可以运行一些所谓“不安全”的方法，例如 eval、new Function、WebAssembly.instantiate 等。
所以可以借助沙盒页面进行 WASM 模块的加载及运行，将计算的结果（听歌识曲的）返回给主页面

https://zhuanlan.zhihu.com/p/509496365

2.vue-aplayer

简单介绍为 Easy-to-use music player for Vue 2.x，一款基于Vue2.0的音乐播放器，传入相关的prop参数可进行自定义修改

因为在项目中使用到了，在这里记录相关的用法

安装

npm install vue-aplayer --save

使用

<aplayer autoplay
  :music="{
    title: 'secret base~君がくれたもの~',
    artist: 'Silent Siren',
    src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
    pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
  }"
/>

实践

<aplayer :music="audio[0]" :list="audio"  :showlrc="true"></aplayer>

Props（参数）

名称	类型	默认值	说明
music	Object	必需	当前播放的音乐。 具体请看音乐信息
list	Array	[]	播放列表。如果 list 不是空数组，播放列表就会显示出来，即使 list 中只有一首歌并且它和 music 一样
mini	Boolean	false	迷你模式
float	Boolean	false	浮动模式。你可以在页面上随意拖放你的播放器
showLrc	Boolean	false	是否显示歌词
mutex	Boolean	true	是否在该播放器播放时暂停其他播放器
theme	String	'#41b883'	主题色。如果当前歌曲也设置了 theme 则以歌曲的为准
shuffle	Boolean	false	随机播放
repeat	String	'no-repeat'	轮播模式。值可以是 'repeat-one'（单曲循环）'repeat-all'（列表循环）或者 'no-repeat'（不循环）。为了好记，还可以使用对应的 'music' 'list' 'none'
listMaxHeight	String	none	播放列表面板最大高度
listFolded	Boolean	false	默认收起播放列表
narrow			DEPRECATED, 请使用 mini
listmaxheight			DEPRECATED, 请使用 listMaxHeight
showlrc			DEPRECATED, 请使用 showLrc

如果你是用的是 Vue@2.3.0+, 你可以在 music shuffle 和 repeat 上使用 .sync修饰符

将 Audio 属性作为 props

从 v1.4.0 开始，我们选取了一些 <audio> 属性并将它们运用为 props（其实也就是上方props参数的拓展）

名称	类型	默认值	是否可变	说明
autoplay	Boolean	false	false	自动播放。如果多个 mutex 播放器设置了 autoplay，只有第一个会自动播放
controls	Boolean	false	true	显示原生 audio 元素（在播放器面板和播放列表面板之间）
muted	Boolean	false	true	静音
preload	String	none	true	The way to load music, can be ‘none’ ‘metadata’ or ‘auto’
volume	Number	0.8	true	播放音量

muted 和 volume 也可以使用 .sync 修饰符，你可以利用这一点做一些自定义的控制

音乐信息

对应props里面的music，当前播放音乐，music props 包含了当前播放歌曲的如下信息。

属性	默认值	说明
src	必需	音频文件的 URL
title	'Untitled'	歌曲名称
artist	'Unknown'	演唱者
pic	none	封面图片 URL
lrc	none	LRC 歌词或者歌词文件的 URL
theme	none	歌曲的主题色，会覆盖播放器的主题色
url		DEPRECATED, 请使用 src
author		DEPRECATED, 请使用 artist

实践：

music: {
    // 当前播放的音乐
    title: "晴天",
    artist: "周杰伦",
    src: require("@/assets/music/周杰伦 - 晴天.mp3"),
    pic: require("..."), // 封面图片
},

事件

从 v1.4.0 开始, Vue-APlayer 会抛出它内部的 <audio> 元素上触发的所有媒体事件. 你可以查阅 MDN 上的这张完整列表.

在 v1.4.0 以前, 我们有一些自定义事件，如 play pause canplay playing ended error, 它们现在已全部被废弃。

自适应主题色

从 v1.3.0 开始, 如果你将一首歌的 theme 值设为 'pic', Vue-APlayer 会从它的封面图片中提取颜色作为主题色. 你也可以直接将 Vue-APlayer 的 theme prop 设为 'pic', 这样所有的歌曲都会使用自适应主题色

你只需将 color-thief 库加入页面中.

注意 color-thief 无法正常使用 npm 安装

也就是说我们只能导入，不能用npm装

<!-- 或者你选择的其他 CDN -->
<script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>

查询更多可以看 https://github.com/SevenOutman/vue-aplayer/blob/develop/docs/README.zh-CN.md