H5录制音频时踩过的几个坑

最新推荐文章于 2024-04-13 10:04:13 发布
最新推荐文章于 2024-04-13 10:04:13 发布
阅读量1.1k 收藏 1
点赞数 2
分类专栏： H5 文章标签： H5 H5音频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43466173/article/details/86539668
版权

续上篇本人写的H5录制音频demo，加上一些在操作当中踩过的一些坑

坑1
  • H5录制的音频在安卓平台不支持MP3的录制，很多人（如产品）第一反应是不可能，奉劝各位自己写一个demo，方便给每个质疑的人演示一遍
坑2
  • H5录制的wav音频（因为wav可以兼容大部分浏览器且安卓不支持MP3，所以用wav）在网页不支持播放
  • 原因分析：可能是因为H5录制的wav格式音频编码不是很正确，audio标签识别不了，亲测使用转码工具把amr或MP3文件转换成wav格式，浏览器完美播放
坑3
  • 虽然H5文档说支持改变音频录制的采样率（如8000,16000,4000等），并自动判断手机是否支持该采样率，如果不支持则采取默认的采样率（8000），但有某写情况下即便手机支持该采样率（如4000），在网页播放该音频的时候可能会因为采样率过低而不能进行播放
坑4
  • 可以考虑录制amr格式的音频上传到后台，然后在后台使用ffmpeg工具进行转码，音频也能正常在网页上面播放
仓底储备粮
关注
专栏目录
Vue2 - 详细实现网页 “开启录音并生成音频文件，上传到服务器效果“，浏览器录制外部音频调用麦克风并传到后端，兼容全部浏览器、支持 PC 网页或手机 H5 网页、可本地播放试听（详细示例运行代码）
王佳斌
05-21 4612
vue，nuxt，uniapp，网页网站，麦克风，网页录音，MediaRecorder，浏览器录音，移动端h5网页，手机端录音，web网页录音，recorder-core官方文档，Recorder，非https怎么本地录音，录音报错失败，录音后怎么播放音频，如何获取录音mp3文件，解决一直不提示麦克风权限，小白详细教程，实时录音，调用浏览器麦克风录音，浏览器不兼容，wav，mp3，vue怎么实现网页录音呢，vue2网页录音并上传到服务器，web如何实现录制音频，vue网页录音，音频录制播放和上传服务器，vu
Vue3 - 详细实现网页 “开启录音并生成音频文件，上传到服务器效果“，浏览器录制外部音频调用麦克风并传到后端，兼容全部浏览器、支持 PC 网页或手机 H5 网页、可本地播放试听（详细示例运行代码）
最新发布
王佳斌
05-21 5252
vue3，nuxt3，uniapp，网页网站，麦克风，网页录音，MediaRecorder，浏览器录音，移动端h5网页，手机端录音，web网页录音，vue3网页录音并上传到服务器，web如何实现录制音频，vue网页录音，音频录制播放和上传服务器，vue3实现H5网页录音并上传，无法调用麦克风弹框怎么办，recorder-core官方文档，Recorder，非https怎么本地录音，录音报错失败，录音后怎么播放音频，如何获取录音mp3文件，解决一直不提示麦克风权限，小白详细教程，实时录音，调用浏览器麦克风录音
H5音频处理——踩坑之旅
weixin_34192816的博客
03-14 2125
随着公司产品的业务扩展，今年算是和浏览器的录音功能硬磕上了。遇到了不少奇葩的问题以及一些更多的扩展吧~这里记录一下分享给同样遇到问题后脑壳疼的各位。 解析base64的pcm数据进行播放 这个场景还是存在的。在websocket和server的交互上可能不存在问题。但是如果是原生应用间的交互，为了保证数据的一致性，只传string的情况下就需要用到了。 解析base64变为arrayBuffe...
学习HTML5音频录制
weixin_34185560的博客
10-18 321
2019独角兽企业重金招聘Python工程师标准>>> ...
【recorder-core】h5录音
qq_35227244的博客
04-01 2249
导读：记录实现 html5 打开录音，语音输入功能的过程。
前端h5录音
weixin_42371812的博客
04-13 525
时隔差不多半个月， 现在才来写这编博客。由于某些原因，我一直没有写，请大家原谅。前段时间开发了一个小模块。模块的主要功能就是有一个录音的功能。也就是说，模仿微信发送语音的功能一样。不多说，直接来一段代码。
uniapp中实现H5录音和上传、实时语音识别（兼容App小程序）和波形可视化
热门推荐
高坚果兄弟
01-10 1万+
在uniapp中使用Recorder-UniCore插件可以实现跨平台录音功能，uniapp自带的recorderManager接口不支持H5、录音格式和实时回调onFrameRecorded兼容性不好，用Recorder插件可避免这些问题。支持vue2、vue3、nvue，支持已有的大部分录音格式：mp3、wav、pcm、amr、ogg、g711a、g711u等
html5录制mp3,html5 录制mp3音频，支持采样率和比特率设置
weixin_28894087的博客
06-19 836
13年的时候做过html5录音，一个问题是保存的wav格式文件很大，当初用了一个迂回的方式，上传到服务器后调用 lame 编码器转换，但由于文件大，上传较慢。不得不说，前端技术发展真是日新月异，有人实现了js版本的lame编码器，可以直接在浏览器端录制MP3音频。lamejs介绍最初有个开源项目libmp3lame-js，直接将 lame 源码编译为 js版本，后来有人基于libmp3lam...
uniapp - [微信小程序] 超详细实时录音功能，录制外部声音及播放上传到服务器（支持录音完毕生成 mp3、试听音频(带进度条)、暂停录音、重新录音、限制录音最大时长、自定义音频名称等功能）
王佳斌
06-28 6810
uniapp微信小程序录音，uniapp微信小程序麦克风录音效果示例代码，uniapp微信小程序录音插件，uniapp如何实现一个录音并生成mp3文件功能，uniapp微信小程序平台怎么录音且保存音频mp3，uniapp点击录音并上传到服务器，uniapp实现录音并播放，uniapp如何实现录音功能，uniapp小程序长按录音点击播放等功能组件，uniapp小程序怎么实现录音并下载保存到本地，uniapp微信小程序平台端录音，uniapp小程序实现录制声音和试听播放 上传音频功能，uniapp录制说话唱歌音
使用H5实现在线录音并保存到本地
quweiie的专栏
10-10 721
【代码】使用H5实现在线录音并保存到本地。
h5 录音功能的实现
12-18
h5录音功能通过收集实现基于https的运行，对于http会报错
HTML5页面实现录音功能
11-28
Since Chrome version 47, Voice Recording works only on HTTPS sites 目前基于webikit(谷歌之类的webikit)和Gecko(Firefox 52~57)都可以(不支持苹果移动设备)，测试地址 https://sms.reyo.cn/ 用户名:aa 密码：123456 我们就是想实现像微信一样的能发送语音的聊天数据(只是我们用h5在网页上实现)：
Html5网页纯JavaScript录制MP3音频
10-23
Html5网页纯JavaScript录制MP3音频 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Html5网页JavaScript录制MP3音频</title> <meta charset="utf-8" /> </head> <body> Html5网页JavaScript录制MP3音频 录制 停止 上传 调试信息： [removed][removed] [removed] var recorder = new MP3Recorder({ debug:true, funOk: function () { btnStart.disabled = false; log('初始化成功'); }, funCancel: function (msg) { log(msg); recorder = null; } }); var mp3Blob; function funStart(button) { btnStart.disabled = true; btnStop.disabled = false; btnUpload.disabled = true; log('录音开始...'); recorder.start(); } function funStop(button) { recorder.stop(); btnStart.disabled = false; btnStop.disabled = true; btnUpload.disabled = false; log('录音结束，MP3导出中...'); recorder.getMp3Blob(function (blob) { log('MP3导出成功'); mp3Blob = blob; var url = URL.createObjectURL(mp3Blob); var div = document.createElement('div'); var au = document.createElement('audio'); var hf = document.createElement('a'); au.controls = true; au.src = url; hf.href = url; hf.download = new Date().toISOString() + '.mp3'; hf[removed] = hf.download; div.appendChild(au); div.appendChild(hf); recordingslist.appendChild(div); }); } function log(str) { recordingslist[removed] += str + ''; } function funUpload() { var fd = new FormData(); var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3'); fd.append('mp3Name', mp3Name); fd.append('file', mp3Blob); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { recordingslist[removed] += '上传成功：' + mp3Name + ''; } }; xhr.open('POST', 'upload.ashx'); xhr.send(fd); } [removed] </body> </html> [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 (function (exports) { var MP3Recorder = function (config) { var recorder = this; config = config || {}; config.sampleRate = config.sampleRate || 44100; config.bitRate = config.bitRate || 128; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({ audio: true }, function (stream) { var context = new AudioContext(), microphone = context.createMediaStreamSource(stream), processor = context.createScriptProcessor(16384, 1, 1),//bufferSize大小，输入channel数，输出channel数 mp3ReceiveSuccess, currentErrorCallback; config.sampleRate = context.sampleRate; processor.onaudioprocess = function (event) { //边录音边转换 var array = event.inputBuffer.getChannelData(0); realTimeWorker.postMessage({ cmd: 'encode', buf: array }); }; var realTimeWorker = new Worker('js/worker-realtime.js'); realTimeWorker.onmessage = function (e) { switch (e.data.cmd) { case 'init': log('初始化成功'); if (config.funOk) { config.funOk(); } break; case 'end': log('MP3大小：', e.data.buf.length); if (mp3ReceiveSuccess) { mp3ReceiveSuccess(new Blob(e.data.buf, { type: 'audio/mp3' })); } break; case 'error': log('错误信息：' + e.data.error); if (currentErrorCallback) { currentErrorCallback(e.data.error); } break; default: log('未知信息：', e.data); } }; recorder.getMp3Blob = function (onSuccess, onError) { currentErrorCallback = onError; mp3ReceiveSuccess = onSuccess; realTimeWorker.postMessage({ cmd: 'finish' }); }; recorder.start = function () { if (processor && microphone) { microphone.connect(processor); processor.connect(context.destination); log('开始录音'); } } recorder.stop = function () { if (processor && microphone) { microphone.disconnect(); processor.disconnect(); log('录音结束'); } } realTimeWorker.postMessage({ cmd: 'init', config: { sampleRate: config.sampleRate, bitRate: config.bitRate } }); }, function (error) { var msg; switch (error.code || error.name) { case 'PERMISSION_DENIED': case 'PermissionDeniedError': msg = '用户拒绝访问麦客风'; break; case 'NOT_SUPPORTED_ERROR': case 'NotSupportedError': msg = '浏览器不支持麦客风'; break; case 'MANDATORY_UNSATISFIED_ERROR': case 'MandatoryUnsatisfiedError': msg = '找不到麦客风设备'; break; default: msg = '无法打开麦克风，异常信息:' + (error.code || error.name); break; } if (config.funCancel) { config.funCancel(msg); } }); } else { if (config.funCancel) { config.funCancel('当前浏览器不支持录音功能'); } } function log(str) { if (config.debug) { console.log(str); } } } exports.MP3Recorder = MP3Recorder; })(window);
html5录音mp3格式，可调采样率和比特率设置。
06-15
本资源为html5页面录音mp3格式音频，支持对采样率和比特率的设置。自身项目亲测，内有相关js文件及详细注解。
H5通过浏览器录制视屏或音频
韩吉鑫的博客
08-02 6699
webAPI获取摄像头及MIc MediaRecorder.start()//开始录制命令 MediaRecorder.pause()//暂停录制 MediaRecorder.resume()//继续录制 MediaRecorder.stop()//停止录制 navigator.mediaDevices//获得设备的摄像头 通过getUserMedia获得视屏流或音频流
H5页面嵌入APP录音功能方案
哈喽234的博客
07-11 2227
安卓，ios开发提供对应原生录音方法，H5开发人员进行对接录音功能模块，最终语音录入功能在App能够正常使用。
Html5_h5新增api（存在兼容性问题）---视频、音频
weixin_34132768的博客
06-04 355
因为不同浏览器下播放器长的不一样，为了让用户可以使用同一样式播放器 ，我们自己来设置播放器样式 　　　　 　 　　　进度条的写法 　　　　 　　　　 转载于:https://www.cnblogs.com/yangyutian/p/10976074.html...
h5 php录音功能下载,recorder.js 基于Html5录音功能的实现
weixin_42510271的博客
03-12 220
recorder.jsmicrophone基于HTML5的录音功能，输出格式为mp3文件。前言完全依赖H5原生API所涉及的API：WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL兼容性Chrome、FF、Edge、QQ、360(注：目前IE和Safari全版本不兼容)其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持请尝试使用FF...
h5前端兼容性问题及解决方法集合
醉逍遥neo的博客
05-20 3236
整理归纳一些之前记录的h5兼容性问题以及相应的解决方法，大多都是移动端的，持续更新… 1、iOS滑动卡慢 ios里父元素设置overflow:auto或scroll时，子元素滚动时没有滚动惯性，手指离开屏幕就立即停止滚动，所以会有一种卡和慢的感觉。 目前发现ios13及以上系统没有这个问题，但低版本的还会出现，需要解决。 解决方法： css里给滚动父元素设置： -webkit-overflow-scrolling: touch; 注意：这个css属性有很多坑，谨慎使用，例如会导致绝对定位元素会被父元
h5 mediarecorder 音频录制 ios无法播放
09-02
H5 MediaRecorder 是一种在浏览器中进行音频录制的 API。然而，对于使用 iOS 设备的用户来说，存在无法播放录制的音频的问题。 这个问题出现的原因是，H5 MediaRecorder 使用了一种编码格式（如 AMR、OPUS），而 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值