Skip to content

Commit

Permalink
新增MediaRecorder支持，音质更佳；调整WaveView波形不乱变形；npm包增加.d.ts声明文件
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiangyuecn
xiangyuecn committed Aug 7, 2022
1 parent 128ed12 commit 20d3e33
Show file tree
Hide file tree
Showing 29 changed files with 1,976 additions and 237 deletions.
32 changes: 21 additions & 11 deletions QuickStart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,9 @@
<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://xiangyuecn.gitee.io/recorder/assets/demo-vue" target="_blank">H5 vue</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/demo-ts/" target="_blank">H5 ts</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>

<a class="lb" href="https://xiangyuecn.gitee.io/recorder/assets/工具-GitHub页面历史版本访问.html#url=xiangyuecn:[email protected],/QuickStart.html" target="_blank">切换到老版本测试</a>
</div>
Expand Down Expand Up @@ -115,15 +115,14 @@
</div>

<!-- 波形绘制区域 -->
<div class="pd recpower">
<div style="height:40px;width:300px;background:#999;position:relative;">
<div style="padding-top:5px">
<div style="border:1px solid #ccc;display:inline-block;vertical-align:bottom"><div style="height:100px;width:300px;" class="recwave"></div></div>

<div style="height:40px;width:300px;margin-top:5px;display:inline-block;vertical-align:bottom;background:#999;position:relative;">
<div class="recpowerx" style="height:40px;background:#0B1;position:absolute;"></div>
<div class="recpowert" style="padding-left:50px; line-height:40px; position: relative;"></div>
</div>
</div>
<div class="pd waveBox">
<div style="border:1px solid #ccc;display:inline-block"><div style="height:100px;width:300px;" class="recwave"></div></div>
</div>
</div>

<!-- 日志输出区域 -->
Expand All @@ -146,7 +145,7 @@
,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd){
//录音实时回调，大约1秒调用12次本回调
document.querySelector(".recpowerx").style.width=powerLevel+"%";
document.querySelector(".recpowert").innerText=bufferDuration+" / "+powerLevel;
document.querySelector(".recpowert").innerText=formatMs(bufferDuration,1)+" / "+powerLevel;

//可视化图形绘制
wave.input(buffers[buffers.length-1],powerLevel,bufferSampleRate);
Expand Down Expand Up @@ -226,7 +225,7 @@
console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");

recBlob=blob;
reclog("已录制mp3："+duration+"ms "+blob.size+"字节，可以点击播放、上传了",2);
reclog("已录制mp3："+formatMs(duration)+"ms "+blob.size+"字节，可以点击播放、上传了",2);
},function(msg){
reclog("录音失败:"+msg,1);
});
Expand Down Expand Up @@ -360,6 +359,14 @@
};
};
//recOpen弹框End

var formatMs=function(ms,all){
var f=Math.floor(ms/60000),m=Math.floor(ms/1000)%60;
var s=(all||f>0?(f<10?"0":"")+f+":":"")
+(all||f>0||m>0?("0"+m).substr(-2)+"″":"")
+("00"+ms%1000).substr(-3);
return s;
};
</script>


Expand All @@ -386,11 +393,14 @@
reclog('<span style="color:red">【Uncaught Error】'+message+'<pre>'+"at:"+lineNo+":"+columnNo+" url:"+url+"\n"+(error&&error.stack||"不能获得错误堆栈")+'</pre></span>');
};

reclog("RecordApp[即将废弃] 除Recorder支持的外，支持Hybrid App，低版本IOS上支持微信网页和小程序web-view"+unescape("%uD83C%uDF89"),"#f60;font-weight:bold;font-size:24px");
reclog('如需录音功能定制开发，网站、App、小程序、前端后端开发等需求，请加QQ群：①群 781036591、②群 748359095，口令recorder，联系群主（即作者），谢谢~',"#f60;font-size:22px;font-weight:bold");
reclog("Recorder H5使用简单，功能丰富，支持PC、Android、IOS 14.3+"+unescape("%uD83D%uDCAA"),"#0b1;font-weight:bold;font-size:24px");
reclog('本页面修改时间（有可能修改了忘改）：2022-05-24 19:31:18',"#999");
reclog('本页面修改时间（有可能修改了忘改）：2022-08-07 18:20',"#999");
reclog('Recorder库修改时间（有可能修改了忘改）：'+(window.Recorder&&Recorder.LM),"#999");
reclog("UA: "+navigator.userAgent, "#999");
reclog("URL: "+location.href.replace(/#.*/g,""), "#999");
reclog(Tips);
reclog('当前浏览器<span style="color:'+(Recorder.Support()?'#0b1">支持录音':'red">不支持录音')+'</span>');

if(window.useCDN && useCDN.cdn){
reclog('本页面的js资源采用的CDN不稳定，已切换到：'+useCDN.cdn,'#f60');
Expand Down
82 changes: 43 additions & 39 deletions README.md
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/demo-ts/dist/index.js
View file

Large diffs are not rendered by default.

198 changes: 198 additions & 0 deletions assets/demo-ts/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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="../icon.png">

<title>Recorder H5 TypeScript测试</title>
<script src="dist/index.js"></script>
</head>

<body>

<div class="main">
<div class="mainBox">
<span style="font-size:32px;color:#0b1;">Recorder H5 TypeScript测试</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://xiangyuecn.gitee.io/recorder/QuickStart.html" target="_blank">H5 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>
</div>
</div>

<div class="mainBox">
<!-- 按钮控制区域 -->
<div class="pd btns">
<div>
<button onclick="recOpen()" style="margin-right:10px">打开录音,请求权限</button>
<button onclick="recClose()" style="margin-right:0">关闭录音,释放资源</button>
</div>

<button onclick="recStart()">录制</button>
<button onclick="recStop()" style="margin-right:80px">停止</button>

<span style="display: inline-block;">
<button onclick="recPause()">暂停</button>
<button onclick="recResume()">继续</button>
</span>
<span style="display: inline-block;">
<button onclick="recPlay()">播放</button>
<button onclick="recUpload()">上传</button>
</span>
</div>

<!-- 波形绘制区域 -->
<div style="padding-top:5px">
<div style="border:1px solid #ccc;display:inline-block;vertical-align:bottom"><div style="height:100px;width:300px;" class="recwave"></div></div>

<div style="height:40px;width:300px;margin-top:5px;display:inline-block;vertical-align:bottom;background:#999;position:relative;">
<div class="recpowerx" style="height:40px;background:#0B1;position:absolute;"></div>
<div class="recpowert" style="padding-left:50px; line-height:40px; position: relative;"></div>
</div>
</div>
</div>

<!-- 日志输出区域 -->
<div class="mainBox">
<div class="reclog"></div>
</div>

<div class="mainBox">
<div>本测试的码源码在<a href="https://github.com/xiangyuecn/Recorder/tree/master/assets/demo-ts">/assets/demo-ts</a>目录内，主要的文件为<a href="https://github.com/xiangyuecn/Recorder/blob/master/assets/demo-ts/index.ts">/assets/demo-ts/index.ts</a></div>

<div style="margin-top:15px">源码修改后测试方法：
<pre style="background:green;color:#fff;padding:10px;">
> npm install
> npm run build-dev
</pre>
然后就可以打开index.html查看效果了。</div>
</div>
</div>




<!--以下这坨可以忽略-->
<script>
function reclog(s,color){
var now=new Date();
var t=("0"+now.getHours()).substr(-2)
+":"+("0"+now.getMinutes()).substr(-2)
+":"+("0"+now.getSeconds()).substr(-2);
var div=document.createElement("div");
var elem=document.querySelector(".reclog");
elem.insertBefore(div,elem.firstChild);
div.innerHTML='<div style="color:'+(!color?"":color==1?"red":color==2?"#0b1":color)+'">['+t+']'+s+'</div>';
};
window.onerror=function(message, url, lineNo, columnNo, error){
//https://www.cnblogs.com/xianyulaodi/p/6201829.html
reclog('<span style="color:red">【Uncaught Error】'+message+'<pre>'+"at:"+lineNo+":"+columnNo+" url:"+url+"\n"+(error&&error.stack||"不能获得错误堆栈")+'</pre></span>');
};

reclog('如需录音功能定制开发，网站、App、小程序、前端后端开发等需求，请加QQ群：①群 781036591、②群 748359095，口令recorder，联系群主（即作者），谢谢~',"#f60;font-size:22px;font-weight:bold");
reclog("Recorder H5使用简单，功能丰富，支持PC、Android、IOS 14.3+"+unescape("%uD83D%uDCAA"),"#0b1;font-weight:bold;font-size:24px");
reclog('本页面修改时间（有可能修改了忘改）：2022-08-07 18:24',"#999");
reclog('Recorder库修改时间（有可能修改了忘改）：'+(window.Recorder&&Recorder.LM),"#999");
reclog("UA: "+navigator.userAgent, "#999");
reclog("URL: "+location.href.replace(/#.*/g,""), "#999");
reclog('当前浏览器<span style="color:'+(Recorder.Support()?'#0b1">支持录音':'red">不支持录音')+'</span>');
reclog("点击打开录音，然后再点击录制开始录音",2);
</script>

<script>
if(/mobile/i.test(navigator.userAgent)){
//移动端加载控制台组件
var elem=document.createElement("script");
elem.setAttribute("type","text/javascript");
elem.setAttribute("src","https://xiangyuecn.gitee.io/recorder/assets/ztest-vconsole.js");
document.body.appendChild(elem);
elem.onload=function(){
new VConsole();
};
};
</script>

<!-- 加载打赏挂件 -->
<script src="https://xiangyuecn.gitee.io/recorder/assets/zdemo.widget.donate.js"></script>
<script>
var donateView=document.createElement("div");
document.querySelector(".reclog").appendChild(donateView);
DonateWidget({
log:function(msg){reclog(msg)}
,mobElem:donateView
});
</script>

<style>
body{
word-wrap: break-word;
background:#f5f5f5 center top no-repeat;
background-size: auto 680px;
}
pre{
white-space:pre-wrap;
}
a{
text-decoration: none;
color:#06c;
}
a:hover{
color:#f00;
}

.main{
max-width:700px;
margin:0 auto;
padding-bottom:80px
}

.mainBox{
margin-top:12px;
padding: 12px;
border-radius: 6px;
background: #fff;
--border: 1px solid #f60;
box-shadow: 2px 2px 3px #aaa;
}


.btns button{
display: inline-block;
cursor: pointer;
border: none;
border-radius: 3px;
background: #0b1;
color:#fff;
padding: 0 15px;
margin:3px 20px 3px 0;
line-height: 36px;
height: 36px;
overflow: hidden;
vertical-align: middle;
}
.btns button:active{
background: #0a1;
}

.pd{
padding:0 0 6px 0;
}
.lb{
display:inline-block;
vertical-align: middle;
background:#00940e;
color:#fff;
font-size:14px;
padding:2px 8px;
border-radius: 99px;
}
</style>

</body>
</html>
Loading

0 comments on commit 20d3e33

Please sign in to comment.