前端录制麦克风音频

在前端去录制麦克风音频,听起来好简单啊,但是后来发现是个大坑。这个问题要分解:

  • 麦克风
  • 音频
  • 录制

获取麦克风输入比较简单,用webrtc的接口getUserMedia就可以实现了,但是怎么录制?getUserMedia得到的是stream,stream不是buffer,也不分chunks,所以你想要把stream转换为buffer,没办法,必须还得靠高级api。MediaRecorder本来可以用,但是safari不兼容,内心MMP。录制视频用canvas一帧一帧保存起来就行了,但是录制音频……最后找来找去,AudioContext这个api可以用,但是safari只有在11.2版本之后才支持webkitAudioContext,所以,只有用这货才能实现。

总结,在支持MediaRecorder的系统中使用MediaRecorder录制,在iOS中,最多兼容到使用webkitAudioContext去实现,有一个包可以用,就是audio-recorder-polyfill,想法真不错,赞一个。