Skip to content

Commit

Permalink
提供AudioWorklet支持，优化日志显示
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiangyuecn
xiangyuecn committed Mar 4, 2022
1 parent 58fb7af commit 0155607
Show file tree
Hide file tree
Showing 24 changed files with 620 additions and 117 deletions.
11 changes: 7 additions & 4 deletions QuickStart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="image/png" href="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/assets/icon.png">

<title>Recorder QuickStart: 快速入门</title>
<title>Recorder H5 QuickStart: 快速入门</title>
<script>
var Tips='你可以直接将 <a target="_blank" href="https://github.com/xiangyuecn/Recorder/blob/master/QuickStart.html">/QuickStart.html</a> 文件copy到你的(https)网站中，无需其他文件，就能正常开始测试了；相比 Recorder H5 (/index.html) 这个大而全(杂乱)的demo，本文件更适合入门学习'+unescape("%uD83D%uDE04");
console.log(Tips);
Expand Down Expand Up @@ -42,15 +42,16 @@
<!-- 【2】构建界面 -->
<div class="main">
<div class="mainBox">
<span style="font-size:32px;color:#f60;">Recorder QuickStart: 快速入门</span>
<span style="font-size:32px;color:#f60;">Recorder H5 QuickStart: 快速入门</span>
<a href="https://github.com/xiangyuecn/Recorder" target="_blank">GitHub</a>
| <a href="https://gitee.com/xiangyuecn/Recorder" target="_blank">Gitee</a>

<div style="padding-top:10px;color:#666">
更多Demo：
<a class="lb" href="https://xiangyuecn.gitee.io/recorder/" target="_blank">Recorder H5</a>
<a class="lb" href="https://jiebian.life/web/h5/github/recordapp.aspx" target="_blank">RecordApp</a>
<a class="lb" href="https://jiebian.life/web/h5/github/recordapp.aspx?path=/app-support-sample/QuickStart.html" target="_blank">RecordApp QuickStart</a>
<a class="lb" href="https://xiangyuecn.gitee.io/recorder/assets/demo-vue" target="_blank">H5 vue</a>
<a class="lb" href="https://xiangyuecn.gitee.io/recorder/assets/工具-代码运行和静态分发Runtime.html" target="_blank">Demo列表(可编辑)</a>
<a class="lb" href="https://jiebian.life/web/h5/github/recordapp.aspx" target="_blank" style="text-decoration: line-through">RecordApp</a>
</div>
</div>

Expand Down Expand Up @@ -349,6 +350,8 @@

reclog("RecordApp[即将废弃] 除Recorder支持的外，支持Hybrid App，低版本IOS上支持微信网页和小程序web-view"+unescape("%uD83C%uDF89"),"#f60;font-weight:bold;font-size:24px");
reclog("Recorder H5使用简单，功能丰富，支持PC、Android、IOS 14.3+"+unescape("%uD83D%uDCAA"),"#0b1;font-weight:bold;font-size:24px");
reclog('本页面修改时间（有可能修改了忘改）：2022-03-03 21:48:53',"#999");
reclog('Recorder库修改时间（有可能修改了忘改）：'+Recorder.LM,"#999");
reclog(Tips);
</script>

Expand Down
11 changes: 10 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@

> mp3默认16kbps的比特率，2kb每秒的录音大小，音质还可以（如果使用8kbps可达到1kb每秒，不过音质太渣）。主要用于语音录制，双声道语音没有意义，特意仅对单声道进行支持。mp3、wav、pcm格式支持边录边转码，录音结束时转码速度极快，支持实时转码成小片段文件和实时传输，demo中已实现一个语音通话聊天，下面有介绍；其他格式录音结束时可能需要花费比较长的时间进行转码。
>
> mp3使用lamejs编码(CBR)，压缩后的recorder.mp3.min.js文件150kb左右（开启gzip后54kb）。如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav编码器(raw pcm format录音文件超大)，压缩后的recorder.wav.min.js不足5kb。录音得到的mp3(CBR)、wav(PCM)，均可简单拼接小的二进制录音片段文件来生成长的音频文件，具体参考下面这两种编码器的详细介绍。
> mp3使用lamejs编码(CBR)，压缩后的recorder.mp3.min.js文件150kb左右（开启gzip后54kb）。如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav编码器(raw pcm format录音文件超大)，压缩后的recorder.wav.min.js不足12kb。录音得到的mp3(CBR)、wav(PCM)，均可简单拼接小的二进制录音片段文件来生成长的音频文件，具体参考下面这两种编码器的详细介绍。

[​](?)
Expand Down Expand Up @@ -595,6 +595,15 @@ function transformOgg(pcmData){

*这个属性在旧版Recorder中是放在已废弃的set.bufferSize中，后面因为兼容处理Safari上MediaStream断开后就无法再次进行连接使用的问题（表现为静音），把MediaStream连接也改成了全局只连接一次，因此set.bufferSize就移出来变成了Recorder的属性*

### 【静态属性】Recorder.ConnectEnableWorklet
音频采集连接方式：是否要启用AudioWorklet (AudioWorkletNode) 来进行连接，默认为true启用；设为false禁用后将使用过时的ScriptProcessor (AudioContext.createScriptProcessor) 来连接。

如果浏览器不支持AudioWorklet，将只会使用老的ScriptProcessor来进行音频采集连接；如果浏览器已停止支持ScriptProcessor，将永远会尝试启用AudioWorklet而忽略此配置值。

*未雨绸缪，目前只需要ScriptProcessor就能做到100%兼容所有浏览器；以后就算只能用AudioWorklet时，也还是需要保留ScriptProcessor用来支持老浏览器；默认为启用的目的是让代码更经得起考验。*

*导致浏览器崩溃：某些浏览器的AudioWorklet和AudioContext的resume一起作用时会产生崩溃现象，错误代码：STATUS_ACCESS_VIOLATION；此坑已填好，[复现测试页面](https://xiangyuecn.gitee.io/recorder/assets/ztest_chrome_bug_AudioWorkletNode.html)*

### 【静态方法】Recorder.SampleData(pcmDatas,pcmSampleRate,newSampleRate,prevChunkInfo,option)
对pcm数据的采样率进行转换，配合mock方法使用效果更佳，比如实时转换成小片段语音文件。

Expand Down
4 changes: 2 additions & 2 deletions app-support-sample/QuickStart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,15 +101,15 @@
<!-- 【2】构建界面 -->
<div class="main">
<div class="mainBox">
<span style="font-size:32px;color:#f60;">RecordApp QuickStart: 快速入门</span>
<span style="font-size:32px;color:#f60;text-decoration: line-through">RecordApp QuickStart: 快速入门</span>
<a href="https://github.com/xiangyuecn/Recorder" target="_blank">GitHub</a>
| <a href="https://gitee.com/xiangyuecn/Recorder" target="_blank">Gitee</a>

<div style="padding-top:10px;color:#666">
更多Demo：
<a class="lb" href="https://xiangyuecn.gitee.io/recorder/" target="_blank">Recorder H5</a>
<a class="lb" href="https://jiebian.life/web/h5/github/recordapp.aspx" target="_blank">RecordApp</a>
<a class="lb" href="https://xiangyuecn.gitee.io/recorder/QuickStart.html" target="_blank">Recorder QuickStart</a>
<a class="lb" href="https://jiebian.life/web/h5/github/recordapp.aspx" target="_blank" style="text-decoration: line-through">RecordApp</a>
</div>
</div>

Expand Down
19 changes: 15 additions & 4 deletions app-support-sample/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,12 +183,16 @@

<script>
//兼容环境
var PageLM="2021-08-03 21:16:50";
var PageLM="2022-03-03 19:30:37";

function RandomKey(){
return "randomkey"+(RandomKey.idx++);
};
RandomKey.idx=0;

//乐此不疲，古董浏览器，仅保证基本的可执行不代码异常
if(!Date.now)Date.now=function(){return new Date().getTime()};
if(!window.localStorage){window.localStorage={}};
</script>
<script
DEF="/*=:=*/" src="../assets/ztest-jquery.min-1.9.1.js"
Expand Down Expand Up @@ -250,13 +254,13 @@
<a href="https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample" target="_blank">GitHub</a>
| <a href="https://gitee.com/xiangyuecn/Recorder/tree/master/app-support-sample" target="_blank">Gitee</a>

<span class="lb">更多Demo :</span> <a href="https://xiangyuecn.gitee.io/recorder/assets/工具-代码运行和静态分发Runtime.html" target="_blank">在线编辑和运行</a>
<span class="lb">更多Demo :</span> <a href="https://xiangyuecn.gitee.io/recorder/assets/工具-代码运行和静态分发Runtime.html" target="_blank">Demo列表(可编辑)</a>
| <a href="https://xiangyuecn.gitee.io/recorder/assets/demo-vue" target="_blank">H5 vue</a>
| <a href="https://jiebian.life/web/h5/github/recordapp.aspx?path=/assets/demo-vue/recordapp.html" target="_blank">App vue</a>
| <a href="https://jiebian.life/web/h5/github/recordapp.aspx?path=/assets/demo-vue/recordapp.html" target="_blank" style="text-decoration: line-through">App vue</a>
</div>
<div style="margin-top:6px;">
<span class="lb">QuickStart :</span>
<a href="https://jiebian.life/web/h5/github/recordapp.aspx?path=/app-support-sample/QuickStart.html" target="_blank">/app-support-sample/QuickStart.html</a>
<a href="https://jiebian.life/web/h5/github/recordapp.aspx?path=/app-support-sample/QuickStart.html" target="_blank" style="text-decoration: line-through">/app-support-sample/QuickStart.html</a>
<span style="font-size:12px;color:#999">(Copy+后端微信接口即可使用，更适合入门学习)</span>
</div>
</div>
Expand Down Expand Up @@ -980,6 +984,13 @@
var elem=document.createElement("script");
elem.setAttribute("type","text/javascript");
elem.setAttribute("src",PageSet_RecordAppBaseFolder+"engine/"+engines[i]+".js");
if(!("onload" in elem)){//IsLoser 古董浏览器
elem.onreadystatechange=function(){
if(elem.readyState=="loaded"){
load();
}
}
};
elem.onload=function(){
load();
};
Expand Down
Binary file removed assets/audio/movie-sexy-rabbit-baby.mp4
View file
Binary file not shown.
145 changes: 123 additions & 22 deletions assets/demo-vue/component/recorder.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,26 +31,23 @@ a:hover{
}
.mainBtn{
.btns button{
display: inline-block;
cursor: pointer;
border: none;
border-radius: 3px;
background: #0b1;
color:#fff;
padding: 0 15px;
margin-right:20px;
margin:3px 20px 3px 0;
line-height: 36px;
height: 36px;
overflow: hidden;
vertical-align: middle;
}
.mainBtn:active{
.btns button:active{
background: #0a1;
}
.ctrlBtn{
margin-top:10px;
}
.pd{
padding:0 0 6px 0;
}
Expand All @@ -71,19 +68,32 @@ a:hover{
<slot name="top"></slot>

<div class="mainBox">
<div>
<div class="pd">
类型：{{ type }}
<span style="margin:0 20px">
比特率: <input type="text" v-model="bitRate" style="width:60px"> kbps
</span>
采样率: <input type="text" v-model="sampleRate" style="width:60px"> hz
</div>

<div>
<button class="mainBtn ctrlBtn" @click="recOpen">打开录音，请求权限</button>
<button class="mainBtn ctrlBtn" @click="recStart">开始录音</button>
<button class="mainBtn ctrlBtn" @click="recStop">结束录音，并释放资源</button>
</div>
<div class="btns">
<div>
<button @click="recOpen">打开录音,请求权限</button>
<button @click="recClose">关闭录音,释放资源</button>
</div>

<button @click="recStart">录制</button>
<button @click="recStop" style="margin-right:80px">停止</button>

<span style="display: inline-block;">
<button @click="recPause">暂停</button>
<button @click="recResume">继续</button>
</span>
<span style="display: inline-block;">
<button @click="recPlayLast">播放</button>
<button @click="recUploadLast">上传</button>
</span>
</div>
</div>

<div class="mainBox">
Expand Down Expand Up @@ -212,8 +222,18 @@ module.exports={
This.reclog("打开失败：权限请求被忽略，用户主动点击的弹窗",1);
};
}
,recClose:function(){
var rec=this.rec;
this.rec=null;
if(rec){
rec.close();
this.reclog("已关闭");
}else{
this.reclog("未打开录音",1);
};
}
,recStart:function(){
if(!this.rec){
if(!this.rec||!Recorder.IsOpen()){
this.reclog("未打开录音",1);
return;
}
Expand All @@ -222,25 +242,102 @@ module.exports={
var set=this.rec.set;
this.reclog("录制中："+set.type+" "+set.sampleRate+"hz "+set.bitRate+"kbps");
}
,recPause:function(){
if(this.rec&&Recorder.IsOpen()){
this.rec.pause();
}else{
this.reclog("未打开录音",1);
};
}
,recResume:function(){
if(this.rec&&Recorder.IsOpen()){
this.rec.resume();
}else{
this.reclog("未打开录音",1);
};
}
,recStop:function(){
var This=this;
var rec=This.rec;
This.rec=null;
if(!rec){
if(!(this.rec&&Recorder.IsOpen())){
This.reclog("未打开录音",1);
return;
}
var This=this;
var rec=This.rec;
rec.stop(function(blob,duration){
This.reclog("已录制:","",{
blob:blob
,duration:duration
,rec:rec
});
},function(s){
This.reclog("结束出错："+s,1);
},true);//自动close
This.reclog("录音失败："+s,1);
});
}
,recPlayLast:function(){
if(!this.recLogLast){
this.reclog("请先录音，然后停止后再播放",1);
return;
};
this.recplay(this.recLogLast.idx);
}
,recUploadLast:function(){
if(!this.recLogLast){
this.reclog("请先录音，然后停止后再上传",1);
return;
};
var This=this;
var blob=this.recLogLast.res.blob;
//本例子假设使用原始XMLHttpRequest请求方式，实际使用中自行调整为自己的请求方式
//录音结束时拿到了blob文件对象，可以用FileReader读取出内容，或者用FormData上传
var api="https://xx.xx/test_request";
var onreadystatechange=function(title){
return function(){
if(xhr.readyState==4){
if(xhr.status==200){
This.reclog(title+"上传成功",2);
}else{
This.reclog(title+"没有完成上传，演示上传地址无需关注上传结果，只要浏览器控制台内Network面板内看到的请求数据结构是预期的就ok了。", "#d8c1a0");
console.error(title+"上传失败",xhr.status,xhr.responseText);
};
};
};
};
This.reclog("开始上传到"+api+"，请求稍后...","#f60");
/***方式一：将blob文件转成base64纯文本编码，使用普通application/x-www-form-urlencoded表单上传***/
var reader=new FileReader();
reader.onloadend=function(){
var postData="";
postData+="mime="+encodeURIComponent(blob.type);//告诉后端，这个录音是什么格式的，可能前后端都固定的mp3可以不用写
postData+="&upfile_b64="+encodeURIComponent((/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1]) //录音文件内容，后端进行base64解码成二进制
//...其他表单参数
var xhr=new XMLHttpRequest();
xhr.open("POST", api);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange=onreadystatechange("上传方式一【Base64】");
xhr.send(postData);
};
reader.readAsDataURL(blob);
/***方式二：使用FormData用multipart/form-data表单上传文件***/
var form=new FormData();
form.append("upfile",blob,"recorder.mp3"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3
//...其他表单参数
var xhr=new XMLHttpRequest();
xhr.open("POST", api);
xhr.onreadystatechange=onreadystatechange("上传方式二【FormData】");
xhr.send(form);
}
Expand All @@ -252,7 +349,7 @@ module.exports={
,reclog:function(msg,color,res){
this.logs.splice(0,0,{
var obj={
idx:this.logs.length
,msg:msg
,color:color
Expand All @@ -261,7 +358,11 @@ module.exports={
,playMsg:""
,down:0
,down64Val:""
});
};
if(res&&res.blob){
this.recLogLast=obj;
};
this.logs.splice(0,0,obj);
}
,recplay:function(idx){
var This=this;
Expand Down
Loading

0 comments on commit 0155607

Please sign in to comment.