Unity-WebGL-AudioRecorder: A JavaScript repository from zhoushilei0918

Unity WebGL Recorder

最近做项目需要实现 Unity 发布到网页端，然后实现网页端录音并获取录音数据分析的功能。效果如下：

需要注意一下，使用的是 WebGL 兼容性较好的 2020.3.35f1c2 版本进行构建。

一. 解决痛点一 —— AudioClip.GetData

在 WebGL 平台无法调用 AudioClip.GetData(float[], int) 获取音频片段的采样数据。这里通过如下两个脚本：

通过对音频 AudioClip 片段进行 "预处理" 的方式，把其内部的数据包括：采样频率，通道，采样长度，播放长度等信息，保存到 StreamingAssets 文件夹下：

通过如下的方式，生成这个 "预处理" 的数据文件：

备注：要注意这里的 AudioClip 必须名称唯一，否则会报错。

对于预处理的文件，内容格式如下：
- 第一行：samples，采样数据长度；
- 第二行：channels，通道数；
- 第三行：length，片段播放时长；
- 第四行：frequency，播放频率；
- 第五行：GetData 获取的 float[] 采样数据。
在 WebGL 平台中，由于 "预处理" 文件在 StreamingAssets 文件夹下，会一起打包到 StreamingAssets 文件夹下，可以通过 UnityWebRequest 进行访问：

在脚本中，通过使用如下拓展方法 AudioClip.GetData(UnityAction<bool, float[]>) 替代原来的 AudioClip.GetData(float[], int) 。这里由于访问 "预处理" 文件的数据是使用 UnityWebRequest，会有访问的延迟，所以使用回调的方式。其中，这个方法第一个参数是是否读取成功，第二个参数是 GetData 的采样数据。代码如下：

// 已经经过预处理的 AudioClip
AudioClip audioclip = ...;

// 
int samples = audioclip.samples;
int channels = audioclip.channels;
float length = audioclip.length;
int frequency = audioclip.frequency;
var coroutine = audioclip.GetData((r, datas) =>
{
    StringBuilder build = new StringBuilder();
    build.AppendLine("当前的 AudioClip 读取状态：" + r);
    build.AppendLine("channels: " + channels);
    build.AppendLine("samples: " + samples);
    build.AppendLine("length: " + length);
    build.AppendLine("frequency: " + frequency);
    build.AppendLine("datas: ");
    build.AppendLine(string.Join(",", datas));
    print(build.ToString());
});
// 由于这样获取采样数据有延迟
StartCoroutine(coroutine);

具体的测试见项目中脚本 TestAudioClipGetData。

二. 解决痛点二 —— WebGL Html5 录音

这边使用了其他大佬写的插件，参考连接如下：

https://github.com/xiangyuecn/Recorder

前端部分的代码几乎来源于：

https://xiangyuecn.gitee.io/recorder/assets/%E5%B7%A5%E5%85%B7-%E4%BB%A3%E7%A0%81%E8%BF%90%E8%A1%8C%E5%92%8C%E9%9D%99%E6%80%81%E5%88%86%E5%8F%91Runtime.html?jsname=teach.realtime.encode_transfer_frame_pcm

这里对其进行一些整理，大致代码的逻辑都是相似的：

这里使用了 Unity 默认的 Defult 模版修改而成，仅仅增加了如下几行代码：

在 Unity 部分，通过 Recorder 脚本中的相关方法对前端进行调用：
- Start：开始录音；
- Stop：结束录音；
- GetAudioData：后台无法直接调用（private)，前端需要再结束录音时通过此方法进行回调处理数据；
- PlayClip：播放当前录制的音频片段；
- DownloadPCM16：下载录制音频片段的 PCM 16 格式文件；
- DownloadWAV：下载录制音频片段的 WAV 格式文件；

值得一说的是，在结束录音时，返回给后台的是评率为 16000、单通道 base64 字符串，通过 Convert.FromBase64String(） 转为 byte[] 之后是纯 PCM 16 格式的音频，只需要在其前部增加一个 WAV 格式的头部就可以做为 WAV 进行生成。具体的参考可查阅：
```
https://www.zhihu.com/tardis/bd/art/661872341?source_id=1001
```
这里下载 WAV 的处理就是这个原理：

关于如何调用到前端的话，具体看如下两个部分，这里就不过多赘述：

三. 总结

对于平台的兼容性目前只做了一些比较一般性的测试，后续还会加入更多测试来验证这个方案的可行性。如果有何问题都可以联系 QQ：1482915150，并且如果这个项目对你有帮助，请点个星星。

zhoushilei0918/Unity-WebGL-AudioRecorder

Unity WebGL Recorder

一. 解决痛点一 —— AudioClip.GetData

二. 解决痛点二 —— WebGL Html5 录音

三. 总结