Java把前端js录音转文字 js录音插件

转载

mob64ca14061c9e 2023-12-10 16:40:15

文章标签 Java把前端js录音转文字 vue.js 数据文件名官网 文章分类 Java 后端开发

前言：

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

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

Java把前端js录音转文字 js录音插件_vue.js

Java把前端js录音转文字 js录音插件_文件名_02

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

官方案例入口：点我

官方源码git入口：点我

实现步骤：

一：安装插件 js-audio-recorder

cnpm i js-audio-recorder --s

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

cnpm install lamejs --s

三：附上实现源码：

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

Java把前端js录音转文字 js录音插件_vue.js_03

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>