h5调用android录音,html5网页录音插件Recorder

article/2025/10/15 6:24:35

d54501a77645e49e649f9e3515baf365.png

5b4b944461607cc871b1911f9854541f.png

插件描述：html5 js 录音 mp3 wav ogg webm amr 格式，支持pc和Android、ios部分浏览器、和Hybrid App(提供Android IOS App源码)，微信也是支持的，提供H5版语音通话聊天示例

Recorder用于html5录音

支持大部分已实现getUserMedia的移动端、PC端浏览器；主要包括：Chrome、Firefox、Safari、Android WebView、腾讯Android X5内核(QQ、微信)；不支持：UC系内核(典型的支付宝，大部分国产手机厂商的浏览器)，IOS上除Safari外的其他任何形式的浏览器(含PWA、WebClip、任何App内网页)。

录音默认输出mp3格式，另外可选wav格式(raw pcm format此格式录音文件超大)；有限支持ogg(beta)、webm(beta)、amr(beta)格式；支持任意格式扩展(前提有相应编码器)。

mp3默认16kbps的比特率，2kb每秒的录音大小，音质还可以(如果使用8kbps可达到1kb每秒，不过音质太渣)。主要用于语音录制，双声道语音没有意义，特意仅对单声道进行支持。mp3和wav格式支持边录边转码，录音结束时转码速度极快，支持实时转码成小片段文件和实时传输，demo中已实现一个语音通话聊天，下面有介绍；其他格式录音结束时可能需要花费比较长的时间进行转码。

mp3使用lamejs编码，压缩后的recorder.mp3.min.js文件150kb左右(开启gzip后54kb)。如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav(raw pcm format)编码器，压缩后的recorder.wav.min.js不足5kb。

快速使用

【1】加载框架

在需要录音功能的页面引入压缩好的recorder.xxx.min.js文件即可 (注意：需要在https等安全环境下才能进行录音) 

或者直接使用源码(src内的为源码、dist内的为压缩后的)，可以引用src目录中的recorder-core.js+相应类型的实现文件，比如要mp3录音： 

可自行用 AMD/CommonJS 写法把 Recorder 函数(把格式支持文件合并过来)进行导出；或者尝试直接 import/require recorder.mp3.min.js，应该可以通过全局window.Recorder访问，简单粗暴。vue?! angular?!可用??!!，webpack使用。

【2】调用录音

然后使用，假设立即运行，只录3秒var rec=Recorder({type:"mp3",sampleRate:16000,bitRate:16});//mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎

//var dialog=createDelayDialog(); 开启可选的弹框伪代码，需先于open执行，因为回调不确定是同步还是异步的

rec.open(function(){//打开麦克风授权获得相关资源

//dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消

rec.start();//开始录音

setTimeout(function(){

rec.stop(function(blob,duration){//到达指定条件停止录音

console.log((window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");

rec.close();//释放录音资源

//已经拿到blob文件对象想干嘛就干嘛：立即播放、上传

/*立即播放例子*/

var audio=document.createElement("audio");

audio.controls=true;

document.body.appendChild(audio);

//简单的一哔，注意不用了时需要revokeObjectURL，否则霸占内存

audio.src=(window.URL||webkitURL).createObjectURL(blob);

audio.play();

},function(msg){

console.log("录音失败:"+msg);

});

},3000);

},function(msg,isUserNotAllow){//用户拒绝未授权或不支持

//dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消

console.log((isUserNotAllow?"UserNotAllow，":"")+"无法录音:"+msg);

});

//我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且(或者国产系统UC系)浏览器没有任何回调

/*伪代码：

function createDelayDialog(){

if(Is Mobile){//只针对移动端

return new Alert Dialog Component

.Message("录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~")

.Button("忽略")

.OnClick(function(){//明确是用户点击的按钮，此时代表浏览器没有发起任何权限请求

//此处执行fail逻辑

console.log("无法录音：权限请求被忽略");

})

.OnCancel(NOOP)//自动取消的对话框不需要任何处理

.Delay(8000); //延迟8秒显示，这么久还没有操作基本可以判定浏览器有毛病

};

};

*/

【附】录音上传示例var TestApi="/test_request";//用来在控制台network中能看到请求数据，测试的请求结果无关紧要

var rec=Recorder();rec.open(function(){rec.start();setTimeout(function(){rec.stop(function(blob,duration){

//-----↓↓↓以下才是主要代码↓↓↓-------

//本例子假设使用jQuery封装的请求方式，实际使用中自行调整为自己的请求方式

//录音结束时拿到了blob文件对象，可以用FileReader读取出内容，或者用FormData上传

var api=TestApi;

/***方式一：将blob文件转成base64纯文本编码，使用普通application/x-www-form-urlencoded表单上传***/

var reader=new FileReader();

reader.onloadend=function(){

$.ajax({

url:api //上传接口地址

,type:"POST"

,data:{

mime:blob.type //告诉后端，这个录音是什么格式的，可能前后端都固定的mp3可以不用写

,upfile_b64:(/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1] //录音文件内容，后端进行base64解码成二进制

//...其他表单参数

}

,success:function(v){

console.log("上传成功",v);

}

,error:function(s){

console.error("上传失败",s);

}

});

};

reader.readAsDataURL(blob);

/***方式二：使用FormData用multipart/form-data表单上传文件***/

var form=new FormData();

form.append("upfile",blob,"recorder.mp3"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3

//...其他表单参数

$.ajax({

url:api //上传接口地址

,type:"POST"

,contentType:false //让xhr自动处理Content-Type header，multipart/form-data需要生成随机的boundary

,processData:false //不要处理data，让xhr自动处理

,data:form

,success:function(v){

console.log("上传成功",v);

}

,error:function(s){

console.error("上传失败",s);

}

});

//-----↑↑↑以上才是主要代码↑↑↑-------

},function(msg){console.log("录音失败:"+msg);});},3000);},function(msg){console.log("无法录音:"+msg);});

【附】问题排查打开Demo页面试试看，是不是也有同样的问题。

检查是不是在https之类的安全环境下调用的。

检查是不是IOS系统，确认caniuseIOS对getUserMedia的支持情况。

检查上面第1步是否把框架加载到位，在Demo页面有应该加载哪些js的提示。

知识库

本库期待的使用场景是语音录制，因此音质只要不比高品质的感觉差太多就行；1分钟的语音进行编码是很快的，但如果录制超长的录音，比如10分钟以上，不同类型的编码可能会花费比较长的时间，因为只有边录边转码(Worker)支持的类型才能进行极速转码。另外未找到双声道语音录制存在的意义(翻倍录音数据大小，并且拉低音质)，因此特意仅对单声道进行支持。

浏览器Audio Media兼容性mp3最好，wav还行，其他要么不支持播放，要么不支持编码。

特别注：IOS(11.X、12.X)上只有Safari支持getUserMedia，IOS上其他浏览器均不支持，参考下面的已知问题。

特别注：大部分国产手机厂商的浏览器(系统浏览器，都用的UC内核？)虽然支持getUserMedia方法，但并不能使用，表现为直接返回拒绝或者干脆没有任何回调；UC系列目测全部阵亡(含支付宝)。

特别注：如果在iframe里面调用的录音功能，并且和上层的网页是不同的域(跨域了)，如果未设置相应策略，权限永远是被拒绝的，参考此处。另外如果要在非跨域的iframe里面使用，最佳实践应该是让window.top去加载Recorder(异步加载js)，iframe里面使用top.Recorder，免得各种莫名其妙(比如微信里面的各种渣渣功能，搞多了就习惯了)。

如果需要最大限度的兼容IOS(仅增加微信支持)，可以使用RecordApp，它已包含Recorder，源码在src/app-support、app-support-sample中，但此兼容库需要服务器端提供微信JsSDK的签名、下载素材接口，涉及微信公众(订阅)号的开发。支持Recorder

PC浏览器√√

Android Chrome Firefox√√

Android微信(含小程序)√√

Android Hybrid App√√

Android其他浏览器未知未知

IOS Safari√√

IOS微信(含小程序)√

IOS Hybrid App√

IOS其他浏览器

开发难度简单复杂

第三方依赖无依赖微信公众号


http://chatgpt.dhexx.cn/article/aqWKKxx3.shtml

相关文章

利用RecordRTC.js实现H5录音功能

利用RecordRTC.js实现H5录音功能

前言： 最近遇到 要语音转文字 的需求，语音转文字肯定要先搞定录音功能，在网上找了好久没找到具体的 RecordRTC.js 插件的使用方法，最后只能对着 github 上开源代码小试了一下，录音功能好使所以就记录一下叭 一、Reco…
阅读更多...
vue录音+js-audio-recorder

vue录音+js-audio-recorder

小小记录一下项目中用到的录音功能 1.下载插件 npm i js-audio-recorder 2.展示代码 <template><div style"padding: 20px;"><div style"font-size:14px"><h3>录音时长&#xff1a;{{ recorder && recorder.duration.…
阅读更多...
html 苹果微信录音js,微信js-sdk 录音功能的示例代码

html 苹果微信录音js,微信js-sdk 录音功能的示例代码

需求描述 制作一个H5页面&#xff0c;打开之后可以录音&#xff0c;并将录音文件提交至后台 微信录音最长时长为1min 代码如下 // isVoice&#xff1a; 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示 点击录音 // isListen // 0-未试听/试听结束 1-试听中 2-暂停试听…
阅读更多...
已解决：H5移动端网页实现录音功能，js实现录音功能，包括安卓webview接口也可以使用

已解决：H5移动端网页实现录音功能，js实现录音功能，包括安卓webview接口也可以使用

遇到一个需求&#xff0c;需要做一个手机网页录音的功能&#xff0c;嵌入到webview中去&#xff0c;用安卓原生录音倒是可以&#xff0c;但是想着尽量去安卓化开发&#xff0c;就想着用纯的js前端代码去实现录音功能。 在 Web 应用程序中&#xff0c;JavaScript 是运行在浏览器…
阅读更多...
网页录音时的麦克风权限问题解决

网页录音时的麦克风权限问题解决

来源 | https://www.html.cn/web/html/19184.html 在我们进行网页制作时可能会遇到需要录音的情况&#xff0c;而在进行网页录音时又有可能会遇到麦克风权限问题导致无法录音&#xff0c;本文就来为大家介绍一下如何解决麦克风权限问题。 在本地中打开的时候&#xff0c;谷歌、…
阅读更多...
获取摄像头和麦克风权限_js获取浏览器摄像头和麦克风权限

获取摄像头和麦克风权限_js获取浏览器摄像头和麦克风权限

前言 项目中会使用到摄像头或麦克风设备&#xff0c;这就需要我们获取浏览器的摄像头和麦克风权限&#xff0c;权限是无法通过js操控的&#xff0c;必须由浏览器用户设置。 下面我来告诉大家如何获取浏览器的摄像头或麦克风的权限&#xff0c;使浏览器弹出询问窗口。 一、我们想…
阅读更多...
(前端)录音功能实现 js-audio-recorder

(前端)录音功能实现 js-audio-recorder

1. 创建 import Recorder from js-audio-recorder const parameter {sampleBits: 16, // 采样位数&#xff0c;支持 8 或 16&#xff0c;默认是16sampleRate: 8000, // 采样率&#xff0c;支持 11025、16000、22050、24000、44100、48000&#xff0c;根据浏览器默认值&#x…
阅读更多...
Android webview录音权限和音频自动播放

Android webview录音权限和音频自动播放

项目背景&#xff1a;我们通过layabox&#xff0c;制作了H5页面&#xff0c;可以在微信中&#xff0c;手机浏览器中使用&#xff0c;现在需要将H5页面集成到Android的APP中。 遇到的问题&#xff1a; 1.遇到的第一个问题&#xff0c;是获取录音权限的问题&#xff0c;我已经给…
阅读更多...
html 苹果微信录音js,基于JS开发微信网页录音功能的实例代码

html 苹果微信录音js,基于JS开发微信网页录音功能的实例代码

具体代码如下所示&#xff1a; wx.ready(function () { var startRecordflag false var startTime null //btnRecord 为录音按钮dom对象 btnRecord.addEventListener(touchstart, function (event) { event.preventDefault(); startTime newDate().getTime(); // 延时后录音…
阅读更多...
std::string 与 std::wstring 互转

std::string 与 std::wstring 互转

前言: 最近接触了一些 win32 方便的编程,由于不熟 可能会写一写这方便的基础东西 相当于 写日记了 提升一下 他们的声明 string 是 char wstring 是wchar_t 什么是wchar_t ? string 转 wstring inline std::wstring StringToWString(const std::string& str) {int len…
阅读更多...
C++ 字符串string、字符char、宽字符数组wstring、宽字符wchar_t互相转换（2021.4.20）

C++ 字符串string、字符char、宽字符数组wstring、宽字符wchar_t互相转换（2021.4.20）

C单字符串和宽字符串学习 2021.4.20 1、char 和 string1.1 单字符 char1.2 单字符数组 char[] 和 char*1.2.1 char[]1.2.2 char* 1.3 单字符串 string1.4 char[] 转 string1.5 cha[] 转char*1.6 string 转 char*1.7 string 转 char[] 2、wchar_t 和 wstring2.1 宽字符 wchar_t2…
阅读更多...
string和wstring相互转换以及wstring显示中文问题

string和wstring相互转换以及wstring显示中文问题

如果你只是使用C来处理字符串&#xff0c;会用到string。不过string是窄字符串ASCII&#xff0c;而很多Windows API函数用的是宽字符Unicode。这样让string难以应对。作为中国的程序员&#xff0c;我们第一个想到的字符串就是中文&#xff0c;而不是英文。所以经常会遇到中文字…
阅读更多...
C++里面，什么时候使用std::wstring

C++里面，什么时候使用std::wstring

看你要使用什么字符编码了&#xff0c; std::wstring主要用于 UTF-16编码的字符,而std::string主要用于存储单字节的字符( ASCII字符集 )&#xff0c;但是也可以用来保存UTF-8编码的字符。&#xff08;UTF-8和UTF-16是UNICODE字符集的两种不同的字符编码&#xff09; 如果你的…
阅读更多...
String类与wstring类的区别

String类与wstring类的区别

String类与wstring类的区别 本质区别 存储字符的区别 #include <iostream> #include <string> using namespace std; int main() { wstring wstr1 L"你好世界"; // L普通字符串 宽字符串 const wchar_t *ch1 wstr1.c_str(); // 转化为宽字符…
阅读更多...
从新建工程开始使用C++开发单片机(以STM32为例):七、移植Arduino的WString(附代码)

从新建工程开始使用C++开发单片机(以STM32为例):七、移植Arduino的WString(附代码)

在上一篇文章中&#xff0c;介绍了outputString和inputString&#xff0c;其中所运用到的字符串类型String也是C驱动层中功能强大且重要的一个类。这个类移植自Arduino的WString。这篇文章将会展示WString的易用性&#xff0c;并且从编译输出后程序大小的角度比较WSting和C std…
阅读更多...
0005：Qt常用类 - QDateTime

0005：Qt常用类 - QDateTime

Qt常用类 - QDateTime 1 开发环境 在介绍内容之前&#xff0c;先说明一下开发环境&#xff0c;如下图&#xff1a; Qt版本&#xff1a;Qt5.3.2&#xff1b; Qt开发工具&#xff1a;Qt Creater 3.2.1&#xff1b; Qt构建工具&#xff1a;Desktop Qt 5.3 MinGW 32bit&#xff…
阅读更多...
QDateTime的11种显示方式

QDateTime的11种显示方式

QDateTime datetime QDateTime::currentDateTime(); datetime.toString(“hh:mm:ss\nyyyy/MM/dd”); datetime.toString(“hh:mm:ss ap\nyyyy/MM/dd”); datetime.toString(“hh:mm:ss\nyyyy-MM-dd”); datetime.toString(“hh:mm:ss ap\nyyyy-MM-dd”); datetime.to…
阅读更多...
70 QDateTime时间戳转换有误

70 QDateTime时间戳转换有误

1 前言 在开发工具中需要用时间戳转换成格式化时间来显示&#xff0c;但引用QT中自带的时间类QDateTime转换时&#xff0c;发现转换时间有误问题&#xff0c;转换的结果时分秒是正确的&#xff0c;但月份确实错误的。因此在未深入研究qt实现情况下&#xff0c;需要得到正确的格…
阅读更多...
QDateTime类的部分函数使用解析

QDateTime类的部分函数使用解析

QDateTime类提供了日期和时间功能。 QDateTime对象包含一个日历日期和一个时钟时间&#xff08;一个“日期时间”&#xff09;。它是QDate和QTime两个类的组合。它可以从系统时钟中读取当前日期时间。它提供比较日期时间和操作日期时间的函数&#xff0c;比如加上一定数量的秒…
阅读更多...
QDateTime时间相减

QDateTime时间相减

qDebug()<<"span"<<QDateTime::fromMSecsSinceEpoch(QDateTime::currentDateTime().toMSecsSinceEpoch() - time.toMSecsSinceEpoch()).toUTC().toString("hh:mm:ss"); 1、使用 QDateTime::toMSecsSinceEpoch 计算时间差&#xff1b; 2、使用…
阅读更多...
推荐文章

Copyright @ 2022~2023