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,其他音频格式

 

 

 

 

 

 

  • 15
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 25
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 25
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值