小程序中使用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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值