forked from xiangyuecn/Recorder
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathQuickStart.html
510 lines (422 loc) · 18.5 KB
/
QuickStart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
<!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="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/assets/icon.png">
<title>RecordApp QuickStart: 快速入门</title>
<script>
var Tips='你可以直接将 <a target="_blank" href="https://github.com/xiangyuecn/Recorder/blob/master/app-support-sample/QuickStart.html">/app-support-sample/QuickStart.html</a> 文件copy 到你的(https)网站中，然后将变量PageSet_RecordAppWxApi改成你自己的后端API地址，无需其他文件，就能正常开始测试了；相比 RecordApp (/app-support-sample/index.html) 这个大而全(杂乱)的demo，本文件更适合入门学习'+unescape("%uD83D%uDE04");
console.log(Tips);
</script>
</head>
<body>
<script>
/********将此处后端API地址改成你的地址即可开始测试**********/
/**【需修改】请使用自己的网站后端一个接口地址去实现：微信JsSDK签名、微信录音素材下载两个功能；不能用这个空的默认值，微信【强制】要【绑安全域名】，别的站用不了。此接口地址是用在ios-weixin-config.js中的，如果你要调整请求的参数、或者响应结果格式、或用两个接口地址，需要修改此js中对应的ajax调用。
【微信文档】后端签名接口参考：微信JsSDK wx.config需使用到后端接口进行签名，文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 阅读：通过config接口注入权限验证配置、附录1-JS-SDK使用权限签名算法。
【微信文档】后端素材下载接口参考: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444738727
**/
var PageSet_RecordAppWxApi="";
/*这个api接口：
会实现两个功能，ajax POST请求参数如下(都是两个参数，完整细节看下面ajax调用):
功能一、action="sign" //JsSDK签名
url="https://x.com/page" //当前页面url地址,需要对这个地址进行签名
功能二、action="wxdown" //素材下载
mediaID="abcd" //需下载的素材ID
响应内容(JSON Object):
{
c:0 //code，0：正常，其他：错误
,m:"" //errMsg code!=0时的错误描述
,v:{} //返回结果value，为JSON Object
//sign时:v={appid:"公众号appid", timestamp:1577836800, noncestr:"随机字符串", signature:"签名值"} 就是返回wx.config需要的签名相关参数
//wxdown时:v={mime:"audio/amr", data:"base64文本"} 就是返回素材下载的音频文件base64编码数据
}*/
/**【需修改】请使用自己的js文件目录，不要用github的不稳定。RecordApp会自动从这个目录内进行加载相关的实现文件、Recorder核心、编码引擎，会自动默认加载哪些文件，请查阅app.js内所有Platform的paths配置**/
var PageSet_RecordAppBaseFolder = "https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/dist/";//使用dist目录内的文件小2/3
//自己使用时应当自己把源码clone下来，然后通过src="/src/app-support/app.js"引入，为了方便copy文件测试起见，使用了JsDelivr CDN，这玩意不一定能正常访问
var onBadCDN=function(){
document.querySelector(".badCDN").innerHTML="cdn.jsdelivr.net可能不稳定，未能检测到js被成功加载。<br>如果页面异常，请复制本页面源码到本地测试，并且批量替换掉 https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/ 为 https://xiangyuecn.gitee.io/recorder/ 就能正常测试了";
};
</script>
<div class="badCDN" style="font-size: 50px;text-align: center;color: #f60;"></div>
<!--【1.1】加载独立配置文件，免得修改app.js-->
<!-- 可选开启ios weixin支持的相关配置 -->
<script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/app-support-sample/ios-weixin-config.js"></script>
<!-- 可选开启native支持的相关配置 -->
<script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/app-support-sample/native-config.js"></script>
<!--
【1.2】引入框架文件，app.js会自动加载实现文件、Recorder核心、编码引擎，需确保PageSet_RecordAppBaseFolder目录正确
注意自己使用时应当自己把源码clone下来，然后通过src="/src/app-support/app.js"引入，这里为了方便copy文件测试起见，使用了JsDelivr CDN。
-->
<script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/dist/app-support/app.js" onerror="onBadCDN()"></script>
<script>
(function(){
//注册可选扩展库
var paths=RecordApp.Platforms.Default.Config.paths;
paths.push({
url:PageSet_RecordAppBaseFolder+"extensions/waveview.js"
,lazyBeforeStart:1 //开启延迟加载，在Start调用前任何时间进行加载都行
,check:function(){return !Recorder.WaveView}
});
paths.push({
url:PageSet_RecordAppBaseFolder+"extensions/lib.fft.js"
,lazyBeforeStart:1
,check:function(){return !Recorder.LibFFT}
});
paths.push({
url:PageSet_RecordAppBaseFolder+"extensions/frequency.histogram.view.js"
,lazyBeforeStart:1
,check:function(){return !Recorder.FrequencyHistogramView}
});
RecordApp.AlwaysUseWeixinJS=!!(+localStorage["RecordApp_AlwaysUseWeixinJS"]||0);
RecordApp.AlwaysAppUseJS=!!(+localStorage["RecordApp_AlwaysAppUseJS"]||0);
//立即加载环境，自动把Recorder加载进来
RecordApp.Install(function(){
console.log("RecordApp.Install成功");
},function(){
var msg="RecordApp.Install出错："+err;
console.log(msg);
alert(msg);
});
})();
</script>
<!-- 【2】构建界面 -->
<div class="main">
<div class="mainBox">
<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://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>
<div class="mainBox">
<!-- 按钮控制区域 -->
<div class="pd btns">
<button onclick="recReq()">请求权限</button>
<button onclick="recStart()">录制</button>
<button onclick="recStop()" style="margin-right:80px">停止</button>
<span style="display: inline-block;">
<button onclick="recPlay()">播放</button>
<button onclick="recUpload()">上传</button>
</span>
</div>
<!-- 波形绘制区域 -->
<div class="pd recpower">
<div style="height:40px;width:300px;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>
<div class="pd">
<span class="lb">JsSDK :</span> <label><input type="checkbox" class="alwaysUseWeixinJS">Android微信内也用JsSDK</label>
</div>
<div>
<span class="lb">AppUseJS :</span> <label><input type="checkbox" class="alwaysAppUseJS">App里面总是使用Recorder H5录音</label>
</div>
</div>
</div>
<!-- 日志输出区域 -->
<div class="mainBox">
<div class="reclog"></div>
</div>
</div>
<!-- 【3】实现录音逻辑 -->
<script>
var rec,wave,recBlob;
/**调用RequestPermission打开录音请求好录音权限**/
var recReq=function(){//一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了
rec=false;
reclog("正在打开录音，请稍后...");
createDelayDialog(); //我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调，此处demo省略了弹窗的代码
RecordApp.RequestPermission(function(){
rec=true;
dialogCancel(); //如果开启了弹框，此处需要取消
reclog("已打开录音，可以点击录制开始录音了",2);
},function(err,isUserNotAllow){
dialogCancel(); //如果开启了弹框，此处需要取消
reclog((isUserNotAllow?"UserNotAllow，":"")+"打开录音失败："+err,1);
});
window.waitDialogClick=function(){
dialogCancel();
reclog("打开失败：权限请求被忽略，<span style='color:#f00'>用户主动点击的弹窗</span>",1);
};
};
/**开始录音**/
function recStart(){
if(!rec|| !RecordApp.Current){
reclog("未请求权限", 1);
return;
};
if(RecordApp.Current==RecordApp.Platforms.Weixin){
reclog("正在使用微信JsSDK，录音过程中不会有任何回调，不要惊慌");
}else if(RecordApp.Current==RecordApp.Platforms.Native){
reclog("正在使用Native录音，底层由App原生层提供支持");
}else{
reclog("正在使用H5录音，底层由Recorder直接提供支持");
};
var set={
type:"mp3"
,bitRate:16
,sampleRate:16000
,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd){
//录音实时回调，大约1秒调用12次本回调
document.querySelector(".recpowerx").style.width=powerLevel+"%";
document.querySelector(".recpowert").innerText=bufferDuration+" / "+powerLevel;
//可视化图形绘制
wave.input(buffers[buffers.length-1],powerLevel,bufferSampleRate);
}
};
wave=null;
recBlob=null;
RecordApp.Start(set,function(){
reclog(RecordApp.Current.Key+"录制中:"+set.type+" "+set.bitRate+"kbps",2);
//此处创建这些音频可视化图形绘制浏览器支持妥妥的
wave=Recorder.FrequencyHistogramView({elem:".recwave"});
},function(err){
reclog(RecordApp.Current.Key+"开始录音失败："+err,1);
});
};
/**结束录音，得到音频文件**/
function recStop(){
if(!rec|| !RecordApp.Current){
reclog("未请求权限",1);
return;
};
RecordApp.Stop(function(blob,duration){
console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");
recBlob=blob;
reclog("已录制mp3："+duration+"ms "+blob.size+"字节，可以点击播放、上传了",2);
},function(msg){
reclog("录音失败:"+msg,1);
});
};
/**播放**/
function recPlay(){
if(!recBlob){
reclog("请先录音，然后停止后再播放",1);
return;
};
var cls=("a"+Math.random()).replace(".","");
reclog('播放中: <span class="'+cls+'"></span>');
var audio=document.createElement("audio");
audio.controls=true;
document.querySelector("."+cls).appendChild(audio);
//简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
audio.src=(window.URL||webkitURL).createObjectURL(recBlob);
audio.play();
setTimeout(function(){
(window.URL||webkitURL).revokeObjectURL(audio.src);
},5000);
};
/**上传**/
function recUpload(){
var blob=recBlob;
if(!blob){
reclog("请先录音，然后停止后再上传",1);
return;
};
//本例子假设使用原始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){
reclog(title+"上传成功",2);
}else{
reclog(title+"没有完成上传，演示上传地址无需关注上传结果，只要浏览器控制台内Network面板内看到的请求数据结构是预期的就ok了。", "#d8c1a0");
console.error(title+"上传失败",xhr.status,xhr.responseText);
};
};
};
};
reclog("开始上传到"+api+"，请求稍后...");
/***方式一：将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);
};
//recReq我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调
var showDialog=function(){
if(!/mobile/i.test(navigator.userAgent)){
return;//只在移动端开启没有权限请求的检测
};
dialogCancel();
//显示弹框，应该使用自己的弹框方式
var div=document.createElement("div");
document.body.appendChild(div);
div.innerHTML=(''
+'<div class="waitDialog" style="z-index:99999;width:100%;height:100%;top:0;left:0;position:fixed;background:rgba(0,0,0,0.3);">'
+'<div style="display:flex;height:100%;align-items:center;">'
+'<div style="flex:1;"></div>'
+'<div style="width:240px;background:#fff;padding:15px 20px;border-radius: 10px;">'
+'<div style="padding-bottom:10px;">录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~</div>'
+'<div style="text-align:center;"><a onclick="waitDialogClick()" style="color:#0B1">忽略</a></div>'
+'</div>'
+'<div style="flex:1;"></div>'
+'</div>'
+'</div>');
};
var createDelayDialog=function(){
dialogInt=setTimeout(function(){//定时8秒后打开弹窗，用于监测浏览器没有发起权限请求的情况，在open前放置定时器利于收到了回调能及时取消（不管open是同步还是异步回调的）
showDialog();
},8000);
};
var dialogInt;
var dialogCancel=function(){
clearTimeout(dialogInt);
//关闭弹框，应该使用自己的弹框方式
var elems=document.querySelectorAll(".waitDialog");
for(var i=0;i<elems.length;i++){
elems[i].parentNode.removeChild(elems[i]);
};
};
//recReq弹框End
</script>
<!--以下这坨可以忽略-->
<script>
(function(){
var alwaysUseWeixinJS=document.querySelector(".alwaysUseWeixinJS");
var alwaysAppUseJS=document.querySelector(".alwaysAppUseJS");
alwaysUseWeixinJS.checked=RecordApp.AlwaysUseWeixinJS;
alwaysAppUseJS.checked=RecordApp.AlwaysAppUseJS;
var clickFn=function(key){
return function(e){
localStorage[key]=e.target.checked?1:0;
location.reload();
};
};
alwaysUseWeixinJS.addEventListener("click",clickFn("RecordApp_AlwaysUseWeixinJS"));
alwaysAppUseJS.addEventListener("click",clickFn("RecordApp_AlwaysAppUseJS"));
})();
</script>
<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("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(Tips);
</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: #f60;
color:#fff;
padding: 0 15px;
margin:3px 20px 3px 0;
line-height: 36px;
height: 36px;
overflow: hidden;
vertical-align: middle;
}
.btns button:active{
background: #f00;
}
.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>