vue实现录音功能js-audio-recorder

前言：

        因为业务需要，现在将整理的录音功能资料记录下，使用插件js-audio-recorder

实现效果：可得到三种录音数据，pcm,wav,mp3 等

官方api入口：点我(网不好的童鞋可以看最下面的api截图)

官方案例入口：点我

官方源码git入口：点我

实现步骤：

一：安装插件 js-audio-recorder

cnpm i js-audio-recorder --s

二：安装将格式转换为mp3的插件 lamejs

cnpm install lamejs --s

三：附上实现源码：

提示：慎用自身的这个监听事件，可以拿到数据，但是每秒拿到的数据非常多

1. <template>

2. <div class="home" style="margin:1vw;">

3. <Button type="success" @click="getPermission()" style="margin:1vw;">获取麦克风权限</Button>

4. <br/>

5. <Button type="info" @click="startRecorder()" style="margin:1vw;">开始录音</Button>

6. <Button type="info" @click="resumeRecorder()" style="margin:1vw;">继续录音</Button>

7. <Button type="info" @click="pauseRecorder()" style="margin:1vw;">暂停录音</Button>

8. <Button type="info" @click="stopRecorder()" style="margin:1vw;">结束录音</Button>

9. <br/>

10. <Button type="success" @click="playRecorder()" style="margin:1vw;">录音播放</Button>

11. <Button type="success" @click="pausePlayRecorder()" style="margin:1vw;">暂停录音播放</Button>

12. <Button type="success" @click="resumePlayRecorder()" style="margin:1vw;">恢复录音播放</Button>

13. <Button type="success" @click="stopPlayRecorder()" style="margin:1vw;">停止录音播放</Button>

14. <br/>

15. <Button type="info" @click="getRecorder()" style="margin:1vw;">获取录音信息</Button>

16. <Button type="info" @click="downPCM()" style="margin:1vw;">下载PCM</Button>

17. <Button type="info" @click="downWAV()" style="margin:1vw;">下载WAV</Button>

18. <Button type="info" @click="getMp3Data()" style="margin:1vw;">下载MP3</Button>

19. <br/>

20. <Button type="error" @click="destroyRecorder()" style="margin:1vw;">销毁录音</Button>

21. </div>

22. </template>

23.  

24. <script>

25. import Recorder from 'js-audio-recorder'

26. const lamejs = require('lamejs')

27. const recorder = new Recorder({

28. sampleBits: 16, // 采样位数，支持 8 或 16，默认是16

29. sampleRate: 48000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000

30. numChannels: 1, // 声道，支持 1 或 2， 默认是1

31. // compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false

32. })

33.  

34. // 绑定事件-打印的是当前录音数据

35. recorder.onprogress = function(params) {

36. // console.log('--------------START---------------')

37. // console.log('录音时长(秒)', params.duration);

38. // console.log('录音大小(字节)', params.fileSize);

39. // console.log('录音音量百分比(%)', params.vol);

40. // console.log('当前录音的总数据([DataView, DataView...])', params.data);

41.  

42. // console.log('--------------END---------------')

43. }

44. export default {

45. name: 'home',

46. methods: {

47. /**

48. * 录音的具体操作功能

49. * */

50. // 开始录音

51. startRecorder () {

52. recorder.start().then(() => {

53.  

54. }, (error) => {

55. // 出错了

56. console.log(`${error.name} : ${error.message}`);

57. });

58. },

59. // 继续录音

60. resumeRecorder () {

61. recorder.resume()

62. },

63. // 暂停录音

64. pauseRecorder () {

65. recorder.pause();

66. },

67. // 结束录音

68. stopRecorder () {

69. recorder.stop()

70. },

71. // 录音播放

72. playRecorder () {

73. recorder.play()

74. },

75. // 暂停录音播放

76. pausePlayRecorder () {

77. recorder.pausePlay()

78. },

79. // 恢复录音播放

80. resumePlayRecorder () {

81. recorder.resumePlay()

82. },

83. // 停止录音播放

84. stopPlayRecorder () {

85. recorder.stopPlay();

86. },

87. // 销毁录音

88. destroyRecorder () {

89. recorder.destroy().then(function() {

90. recorder = null;

91. });

92. },

93. /**

94. * 获取录音文件

95. * */

96. getRecorder(){

97. let toltime = recorder.duration;//录音总时长

98. let fileSize = recorder.fileSize;//录音总大小

99.  

100. //录音结束，获取取录音数据

101. let PCMBlob = recorder.getPCMBlob();//获取 PCM 数据

102. let wav = recorder.getWAVBlob();//获取 WAV 数据

103.  

104. let channel = recorder.getChannelData();//获取左声道和右声道音频数据

105.  
106.  
107.  

108. debugger

109.  

110. },

111. /**

112. * 下载录音文件

113. * */

114. //下载pcm

115. downPCM(){

116. //这里传参进去的时文件名

117. recorder.downloadPCM('新文件');

118. },

119. //下载wav

120. downWAV(){

121. //这里传参进去的时文件名

122. recorder.downloadWAV('新文件');

123. },

124. /**

125. * 获取麦克风权限

126. * */

127. getPermission(){

128. Recorder.getPermission().then(() => {

129. this.$Message.success('获取权限成功')

130. }, (error) => {

131. console.log(`${error.name} : ${error.message}`);

132. });

133. },

134. /**

135. * 文件格式转换 wav-map3

136. * */

137. getMp3Data(){

138. const mp3Blob = this.convertToMp3(recorder.getWAV());

139. recorder.download(mp3Blob, 'recorder', 'mp3');

140. },

141. convertToMp3(wavDataView) {

142. // 获取wav头信息

143. const wav = lamejs.WavHeader.readHeader(wavDataView); // 此处其实可以不用去读wav头信息，毕竟有对应的config配置

144. const { channels, sampleRate } = wav;

145. const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);

146. // 获取左右通道数据

147. const result = recorder.getChannelData()

148. const buffer = [];

149.  

150. const leftData = result.left && new Int16Array(result.left.buffer, 0, result.left.byteLength / 2);

151. const rightData = result.right && new Int16Array(result.right.buffer, 0, result.right.byteLength / 2);

152. const remaining = leftData.length + (rightData ? rightData.length : 0);

153.  

154. const maxSamples = 1152;

155. for (let i = 0; i < remaining; i += maxSamples) {

156. const left = leftData.subarray(i, i + maxSamples);

157. let right = null;

158. let mp3buf = null;

159.  

160. if (channels === 2) {

161. right = rightData.subarray(i, i + maxSamples);

162. mp3buf = mp3enc.encodeBuffer(left, right);

163. } else {

164. mp3buf = mp3enc.encodeBuffer(left);

165. }

166.  

167. if (mp3buf.length > 0) {

168. buffer.push(mp3buf);

169. }

170. }

171.  

172. const enc = mp3enc.flush();

173.  

174. if (enc.length > 0) {

175. buffer.push(enc);

176. }

177.  

178. return new Blob(buffer, { type: 'audio/mp3' });

179. }

180.  

181. },

182.  

183. }

184. </script>

185.  

186. <style lang='less' scoped>

187.  

188. </style>

到这里，代码就结束了，上面每个方法都有很详细的注释，就不累赘了

 

整理api:（有代理的可以看官网，这里是摘取官网的api）

1，使用

2，属性

3，操作

4，Event

5，应用

6，Player

 

7，其他音频格式