2022-06-15 来源：华纳网 责任编辑：谷雨 人气：
核心提示：知识点： 在H5实现实时录音并生成MP3

本课内容：

大家好，欢迎来到谷雨课堂

 

本节，我们来讲用H5来实现录音功能，

并实时生成MP3并可以下载

 

H5本身拥有录音的功能，

借助现代计算机强大的运算能力，

使得我们可以把以前用C或Java来实现的功能，

现在用JS也可以实现，

比如今天说的MP3实时压缩编码等等，

以下是实现本节功能的大部分代码

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
var rec,wave,recBlob;/**调用open打开录音请求好录音权限**/var recOpen=function(){//一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了  rec=null;  wave=null;  recBlob=null;var newRec=Recorder({type:"mp3",sampleRate:16000,bitRate:16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎    ,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd){//录音实时回调，大约1秒调用12次本回调document.querySelector(".recpowerx").style.width=powerLevel+"%";document.querySelector(".recpowert").innerText=bufferDuration+" / "+powerLevel;
//可视化图形绘制      wave.input(buffers[buffers.length-1],powerLevel,bufferSampleRate);    }  });
  createDelayDialog(); //我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调，此处demo省略了弹窗的代码  newRec.open(function(){//打开麦克风授权获得相关资源    dialogCancel(); //如果开启了弹框，此处需要取消
    rec=newRec;
//此处创建这些音频可视化图形绘制浏览器支持妥妥的    wave=Recorder.FrequencyHistogramView({elem:".recwave"});
    reclog("已打开录音，可以点击录制开始录音了",2);  },function(msg,isUserNotAllow){//用户拒绝未授权或不支持    dialogCancel(); //如果开启了弹框，此处需要取消    reclog((isUserNotAllow?"UserNotAllow，":"")+"打开录音失败："+msg,1);  });
window.waitDialogClick=function(){    dialogCancel();    reclog("打开失败：权限请求被忽略，<span style='color:#f00'>用户主动点击的弹窗</span>",1);  };};


/**关闭录音，释放资源**/function recClose(){if(rec){    rec.close();    reclog("已关闭");  }else{    reclog("未打开录音",1);  };};


/**开始录音**/function recStart(){//打开了录音后才能进行start、stop调用if(rec&&Recorder.IsOpen()){    recBlob=null;    rec.start();    reclog("已开始录音...");  }else{    reclog("未打开录音",1);  };};
/**暂停录音**/function recPause(){if(rec&&Recorder.IsOpen()){    rec.pause();  }else{    reclog("未打开录音",1);  };};/**恢复录音**/function recResume(){if(rec&&Recorder.IsOpen()){    rec.resume();  }else{    reclog("未打开录音",1);  };};
/**结束录音，得到音频文件**/function recStop(){if(!(rec&&Recorder.IsOpen())){    reclog("未打开录音",1);return;  };  rec.stop(function(blob,duration){console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");
    recBlob=blob;    reclog("已录制mp3："+duration+"ms "+blob.size+"字节，可以点击播放、上传了",2);  },function(msg){    reclog("录音失败:"+msg,1);  });};

 

其中MP3压缩的关键代码如下

  •  
  •  
  •  
  •  
  •  
rec.stop(function(blob,duration){    console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");    recBlob=blob;    reclog("已录制mp3："+duration+"ms "+blob.size+"字节，可以点击播放、上传了",2);  }

 

 

完整的源代码可以登录【华纳网】下载。

 

https://www.worldwarner.com/






 





免责声明：本文仅代表作者个人观点，与华纳网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
精彩推荐