H5 录音,html录音功能
开篇闲扯
前段时间有个案例是开发一个音频课件，基本就是导入文档、图片等资源后，页面变成类似PPT的布局，然后选择一张图片插入音频。有两种模式：单页编辑和全局编辑。导入音频有两种方式，一是从资源库导入，二是要提到的录音。
说实话，我一开始没接触过HTML5的音频API，应该是在我们接手之前的代码基础上优化的。当然坑也不少，这次我就围绕这些坑说说我的感受(一些基本对象的初始化和获取就省略了，因为这些内容不是这次的重点，有兴趣的同学可以自己去MDN上查文档):
调用Audio API的兼容性编写方法，获取录制声音的大小(应该是频率)。暂停兼容写入方法以获取当前记录时间录音前的准备。
录音前，首先要弄清楚当前设备是否支持音频API。早期的方法navigator.getUserMedia已经被navigator . media devices . get user media所取代，通常大多数现代浏览器已经支持navigator的使用。mediadevices.getusermedia .当然MDN也给出了兼容性的写法。
const promisifiedolgum=function(constraints){//首先获取getUserMedia，如果存在const getuser media=navigator . getuser media navigator . WebKit getuser media navigator . mozgetuser media；//有些浏览器就是不实现——返回一个被拒绝的承诺，并带有一个错误//为了保持一致的接口，如果(！getUserMedia){ return promise . reject(新错误( get user media 在此浏览器中未实现))；} //否则用Promise返回新Promise(function(resolve，reject){ getuser media . call(navigator，constraints，resolve，reject)包装对旧navigator.getUserMedia的调用；});};//旧版浏览器可能根本不会实现mediaDevices，所以我们设置了一个空对象first if(navigator . media devices===undefined){ navigator . media devices={ }；} //有些浏览器部分实现了mediaDevices。我们不能只使用getUserMedia来分配对象//，因为这会覆盖现有的属性。//在这里，如果缺少getUserMedia属性，我们将只添加它. if(navigator . media devices . getuser media===undefined){ navigator . media devices . getuser media=promisifiedOldGUM；}因为这个方法是异步的，所以我们可以给不兼容的设备友好的提示。
navigator . media devices . getuser media(约束)。then(function(media stream){//success }，function(error){//failure const { name }=error；let errorMessageSwitch (name) {//用户拒绝Case notallowed error :Case PermissionDenieError :error message=用户已禁止网页调用录音设备；打破；//录音设备未连接。Case“找不到错误”:case“devices notf underror”:error message=“找不到录制设备”；打破；//其他错误情况“notsupporterror”:error message=“不支持录音功能”；打破；默认值：errorMessage=“录音呼叫错误”；window.console.log(错误)；}返回errorMessage});如果一切顺利，我们可以进入下一步。
(这里省略了获取上下文的方法，因为这不是这次的重点)
开始录音、暂停录音
这里有一个特别的点，就是需要添加一个中间变量来标识当前是否正在录音。因为在火狐上，我们发现了一个问题。录制过程很正常，但是当我们点击暂停时，发现无法暂停。我们当时用的是断开法。这种方法行不通。此方法需要断开所有连接。后来发现，应该添加一个中间变量this.isRecording来确定当前是否正在进行记录。当你点击开始时，它应该被设置为真，当你暂停时，它应该被设置为假。
当我们开始录制时，audioprocess上将会有一个用于录制和监控的事件。如果返回true，则流将被写入，但如果返回false，则不会被写入。所以判断this.isRecording，假的话直接返回。
//某初始化constaudiocontext=newaudiocontext()；const source node=audio context . createmediastreamsource(mediaStream)；const script node=audio context . createscriptprocessor(BUFFER _ SIZE，INPUT_CHANNELS_NUM，out _ CHANNELS _ NUM)；source node . connect(this . script node)；script node . connect(this . audio context . destination)；//监控录音的过程script node . onaudiopress=event={ if(！this.isRecording)返回；//确定是否定期记录this . buffers . push(event . input buffer . getchanneldata(0))；//获取当前通道的数据并写入数组}；当然这里会有一个坑，就是不能再用了，它有自己获取当前录制时长的方法，因为它其实不是真正的暂停，只是不写流而已。所以我们还需要得到当前录音的时长，这需要通过一个公式得到。
const get duration=()={ return(4096 * this . buffers . length)/this . audio context . sampleRate//4096是一个流的长度，sample rate是采样率}这样才能得到正确的录制时间。
结束录音
要结束录音，我先暂停一下，然后需要先听一下或者执行其他操作，再把存储流的数组长度设置为0。
获取频率
get voice size=analyser={ const data array=new uint 8 array(analyser . frequency bincount)；analyser . getbytefrequencydata(data array)；const data=dataArray.slice(100，1000)；const sum=data.reduce((a，b)=a b)；返回总和；};详情见https://developer.mozilla.org/zh-cn/docs/web/API/analyser节点/频率计数。
其他的
HTTPS:在chrome下，全台需要HTTPS允许使用微信。微信内置的浏览器需要调用JSSDK来使用音频格式转换。音频格式有很多种方式。能查到的大部分资料基本都是互相抄袭的。当然有音频质量问题，这里就不赘述了。结语
这次遇到的大部分问题都是兼容性问题，所以在上面踩了很多坑，尤其是在移动端。一开始出现了录音长度写错的问题，导致直接卡壳。这种体验也弥补了HTML5 API的一些空白。当然，最重要的是提醒大家，直接查看MDN，这个原生API文档简单粗暴！
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。