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

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

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

踩坑的地方：

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

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

原来是采样率设置问题，修改为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

js-mp3：https://github.com/soundbus-technologies/js-mp3