小程序中使用onFrameRecorded实时显示波形

r囧r小猫 2022-12-23 01:55 453阅读 0赞

onFrameRecorded 传过来的是MP3帧，但是，这个帧有的时候是不完整的帧，好像是小程序的性能问题或者之类的其他问题。

使用js-mp3，把MP3帧解码成PCM数据，然后再按照pcm数据，来计算分贝数。

踩坑的地方：

1.famebuffer设置的太小，造成传过来的arrayBuffer里面没有一个完整的mp3帧，结果就是Decode失败。以为是小程序的黑箱问题。

2.js-mp3声称自己不支持mpeg2，感觉心里凉了半截，后来“高坚果”给了一个表格：

![2019121723370661.png][]

原来是采样率设置问题，修改为44.1khz采样率，搞定。

3.“高坚果”提供的Recoder里面的源码是使用getChannelData来计算的，里面返回的是一个Float16Array，但是js-mp3解码出来的pcm，如果转换成Float16Array，会有很多NaN，所以没有使用Recoder里面计算分贝大小的方法。但是这个计算方法是仓促写出来的，所以问题多多，已知问题：会出现突然100的情况；并不是对所有声音都敏感。

4.效率很差。因为中间经过了mp3压缩，然后再解码，再判断分贝大小，所以，效率真的很差。

代码摘抄如下：

1.  `recordTest: function () {`
2.  `var ctx = wx.createCanvasContext("firstCanvas")`
3.  `ctx.draw();`
4.  `var curr_index = 0;`
5.  `var reclength = 30; //录音30秒`
6.  `var step = reclength / app.globalData.windowWidth;`
7.  `var startTime = new Date();`
8.  `var powerArr = [];`
9.  `var ctx_height = 200;`
10. 
11. `var rm = wx.getRecorderManager()`
12. `rm.onFrameRecorded((res) => {`
13. `const { frameBuffer } = res`
14. `var decoder = Mp3.newDecoder(frameBuffer)`
15. `if (decoder != null) {`
16. `var pcmArrayBuffer = decoder.decode()`
17. `var pcmArr = new Int16Array(pcmArrayBuffer)`
18. `var size = pcmArr.length`
19. 
20. `var sum = 0;`
21. `for (var i = 0; i < size; i++) {`
22. `sum += Math.abs(pcmArr[i]);`
23. `}`
24. `var powerLevel = sum * 500.0 / (size * 16383);`
25. `if (powerLevel >= 100) {`
26. `powerLevel = 100`
27. `}`
28. `if (powerLevel <= 5) {`
29. `powerLevel = 2`
30. `}`
31. 
32. `powerLevel = parseInt(powerLevel)`
33. `if(powerArr[curr_index] * 2 < powerLevel && powerLevel == 100)`
34. `{`
35. `powerLevel = powerArr[curr_index]`
36. `}`
37. `var bufferDuration = (new Date() - startTime) / 1000; //计算开始了多少秒了`
38. `while (bufferDuration > curr_index * step) //每次循环进来不止前进一次`
39. `{`
40. `powerArr[curr_index] = powerLevel`
41. `curr_index++`
42. `ctx.setFillStyle("#6E6FAC")`
43. `var curr_height = powerLevel / 100 * ctx_height`
44. `var curr_y = (ctx_height - curr_height) / 2`
45. `ctx.fillRect(curr_index, curr_y, 1, curr_height)`
46. `ctx.draw(true)`
47. `}`
48. `}`
49. `})`
50. `rm.onStart(() => {`
51. `console.log('recorder start')`
52. `this.setData({buttonText: "录音中"})`
53. `})`
54. `rm.onPause(() => {`
55. `console.log('recorder pause')`
56. `console.log(farms);`
57. `})`
58. `rm.onStop((res) => {`
59. `this.setData({buttonText: "录音结束"})`
60. `console.log('recorder stop', res)`
61. `console.log("curr_index:" + curr_index)`
62. `const { tempFilePath } = res`
63. 
64. `const fs = wx.getFileSystemManager()`
65. `// // 从临时文件中读取音频`
66. `fs.readFile({`
67. `filePath: tempFilePath,`
68. `success(res) {`
69. `var decoder = Mp3.newDecoder(res.data)`
70. `if (decoder == null) {`
71. `console.log("decoder error")`
72. `}`
73. `else {`
74. `console.log("decode ok")`
75. `var pcmArrayBuffer = decoder.decode()`
76. `console.log(pcmArrayBuffer)`
77. `}`
78. `},`
79. `fail(e) {`
80. `console.log('read fail')`
81. `console.log(e)`
82. `}`
83. `})`
84. 
85. `})`
86. `const options = {`
87. `duration: 30000,`
88. `sampleRate: 44100,`
89. `numberOfChannels: 1,`
90. `encodeBitRate: 64000,`
91. `format: 'mp3',`
92. `frameSize: 1`
93. `}`
94. `rm.start(options)`
95. `}`

pcm计算分贝大小：[https://www.jianshu.com/p/d3745dd23056][https_www.jianshu.com_p_d3745dd23056]

js-mp3：[https://github.com/soundbus-technologies/js-mp3][https_github.com_soundbus-technologies_js-mp3]

[2019121723370661.png]: /images/20221120/7b4c8434cb924332adf081173e410691.png
[https_www.jianshu.com_p_d3745dd23056]: https://www.jianshu.com/p/d3745dd23056
[https_github.com_soundbus-technologies_js-mp3]: https://github.com/soundbus-technologies/js-mp3