app-support-sample/index.html

<!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">

<title>RecordApp测试</title>

</head>

<body>
<script>
//这里有几处编译指令，可以忽略掉，因为这个文件可以双击打开、github.io打开；主要的还是通过我的代理服务器来打开，这时候后面的值会生效，因为微信JsSDK只能在绑定的域名下调用。
var PageSet_RecordAppBaseFolder=/*=:=*/ "../src/" /*<@ "https://xiangyuecn.github.io/Recorder/src/" @>*/;

/*=:=*/ /*<@
//crossorigin
document.body._addChild=document.body.appendChild;
document.body.appendChild=function(s){
	this._addChild(s);
	if(s.tagName=="SCRIPT"){
		s.crossOrigin="anonymous";
	};
	return this;
};
@>*/
</script>

<!-- 加载独立配置文件，免得修改app.js -->
<script
	DEF="/*=:=*/" src="../app-support-sample/ios-weixin-config.js"
	DEF="/*<@ crossorigin='anonymous' src='https://xiangyuecn.github.io/Recorder/app-support-sample/ios-weixin-config.js' @>*/"
></script>

<!-- 加载app.js -->
<script
	DEF="/*=:=*/" src="../src/app-support/app.js"
	DEF="/*<@ crossorigin='anonymous' src='https://xiangyuecn.github.io/Recorder/src/app-support/app.js' @>*/"
></script>

<script>
(function(){
//注册可选扩展库
RecordApp.Platforms.Default.Config.paths.push({
	url:PageSet_RecordAppBaseFolder+"extensions/waveview.js"
	,check:function(){return !Recorder.WaveView}
});

//立即加载环境，自动把Recorder加载进来
RecordApp.Install(function(){
	console.log("RecordApp.Install成功");
	isInstall=true;
	window.onInstall&&onInstall();
},function(err){
	var msg="RecordApp.Install出错："+err;
	console.log(msg);
	alert(msg);
});

})();
var isInstall=false;
</script>



<style>
body{
	word-wrap: break-word;
}
pre{
	white-space:pre-wrap;
}
.pd{
	padding:0 0 6px 0;
}
.btns button{
	padding: 5px 10px;
}
</style>

<script>
//兼容环境
var PageLM="2019-4-18 09:31:26";

function BuildHtml(html,o,notEncode,loop){return o||(o={}),html=(null==html?"":html+"").replace(/\{(fn:)?(:)?(.+?)\}/gi,function(a,b,c,code){try{var v=eval(b?code:"o."+code);return v=void 0===v?"":v+"",c||notEncode?v:v}catch(e){return console.log("BuildHtml Fail",a+"\n"+e.stack),""}}),loop&&/\{(fn:)?(.+?)\}/.test(html)&&(html=BuildHtml(html,o,notEncode,loop)),html};
function RandomKey(){
	return "randomkey"+(RandomKey.idx++);
};
RandomKey.idx=0;
</script>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>


<div>
	<style>
		.navItem{
			display:inline-block;
			width:40%;
			max-width:300px;
			margin-right:20px;
			vertical-align: top;
			background:#eee;
			border-bottom: 5px solid #ccc;
			color:#666;
			text-decoration:none;
			border-radius: 8px;
			padding: 0 5px 3px;
		}
		.navItem.slc{
			border-bottom: 5px solid #0B1;
			color:#000;
		}
		.navItem:hover{
			color:#d44;
		}
		.navTitle{
			text-align: center;
			font-size:18px;
			font-weight: bold;
		}
		.navDesc{
			font-size:12px;
		}
	</style>
	<a class="navItem" href="https://xiangyuecn.github.io/Recorder/">
		<div class="navTitle">Recorder测试</div>
		<div class="navDesc">Recorder库使用简单，功能丰富，支持PC、Android，但IOS上仅Safari支持录音</div>
	</a>
	
	<a class="navItem slc" href="https://jiebian.life/web/h5/github/recordapp.aspx">
		<div class="navTitle">RecordApp测试</div>
		<div class="navDesc">RecordApp除Recorder支持的外，IOS上支持微信网页和小程序web-view，但需要后端提供接口</div>
	</a>
</div>



<!-- begin 开始copy源码 -->
<div>
	<div class="pd">
		<span style="font-size:18px;color:#ef6ea8">大动干戈，仅为兼容IOS而生，不得不向大厂低头</span>
		在未开启原生App支持(Platforms.Native)的情况下，RecordApp会加载Recorder，因此算是完全兼容Recorder，Native没法网页测试，请自行研究。
		
		<br>
		本测试页面重点兼容测试应放在IOS的微信（浏览器、小程序web-view）内。因为其他环境会走Recorder。
	</div>
	<div class="pd">
		GitHub：<a href="https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample">https://github.com/xiangyuecn/Recorder/ => app-support-sample</a>
	</div>
	<div class="pd types">
		类型:
		<label><input type="radio" name="type" value="mp3" engine="mp3,mp3-engine" class="initType" checked>mp3</label>
		<label><input type="radio" name="type" value="wav" engine="wav">wav</label>
		<label><input type="radio" name="type" value="ogg" engine="beta-ogg,beta-ogg-engine">ogg(beta)</label>
		<label><input type="radio" name="type" value="webm" engine="beta-webm">webm(beta)</label>
		<label><input type="radio" name="type" value="amr" engine="beta-amr,beta-amr-engine,wav">amr(beta)</label>
	</div>
	<div class="pd">
		提示：<span class="typeTips">-</span>
	</div>
	<div class="pd">
		比特率: <input type="text" class="bit" value="16"> kbps，越大音质越好
	</div>
	<div class="pd">
		采样率: <input type="text" class="sample" value="16000"> hz，越大细节越丰富
	</div>
	<div class="pd">
		JsSDK: <label><input type="checkbox" class="alwaysUseWeixinJS">Android微信内也用JsSDK</label>
	</div>
	<div class="pd btns">
		<button onclick="recreq()">请求权限测试</button>
	</div>
	<div class="pd btns">
		<button onclick="recstart()">录制</button>
		<button onclick="recstop()">停止</button>
	</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">
		<div style="height:100px;width:300px;border:1px solid #ccc;box-sizing: border-box;display:inline-block" class="recwave"></div>
		<input type="checkbox" class="recwaveSet" checked>
	</div>
	
	<hr>
	<audio class="recPlay" style="width:100%"></audio>
	<div class="reclog"></div>
	<div class="recinfo"></div>
</div>
<script type="text/template" class="tp_recinfo">
<hr/>
浏览器环境情况:
<pre>
IsWx:{fn:!!RecordApp.IsWx}
Platforms:{fn:RecordApp.Current.Key}

AudioContext:{fn:!!window.AudioContext}
webkitAudioContext:{fn:!!window.webkitAudioContext}
mediaDevices:{fn:!!navigator.mediaDevices}
mediaDevices.getUserMedia:{fn:!!(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia)}
navigator.getUserMedia:{fn:!!navigator.getUserMedia}
navigator.webkitGetUserMedia:{fn:!!navigator.webkitGetUserMedia}

UA:{fn:navigator.userAgent}

RecordApp库修改时间（有可能修改了忘改）:{fn:RecordApp.LM}
Recorder库修改时间（有可能修改了忘改）:{fn:RecorderLM}
本页面修改时间（有可能修改了忘改）：{fn:PageLM}

</pre>
</script>



<script>
function reclog(s){
	$(".reclog").prepend('<div>['+new Date().toLocaleTimeString()+']'+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>');
};
</script>



<script>
function baseSet(){
	var alwaysUseWeixinJS=$(".alwaysUseWeixinJS")[0].checked;
	if(!!RecordApp.alwaysUseWeixinJSPrev!=alwaysUseWeixinJS){
		reclog("JsSDK选项变更，已重置RecordApp，请先进行权限测试");
		RecordApp.Current=null;
		RecordApp.alwaysUseWeixinJSPrev=alwaysUseWeixinJS;
	};
	RecordApp.AlwaysUseWeixinJS=alwaysUseWeixinJS;
};
function recreq(){
	baseSet();
	reclog("开始请求授权...");
	RecordApp.RequestPermission(function(){
		reclog(RecordApp.Current.Key+"已授权");
	},function(err,isUserNotAllow){
		reclog(RecordApp.Current.Key+(isUserNotAllow?" UserNotAllow，":"")+" 授权失败："+err);
	});
};
var curSet;
function recstart(){
	baseSet();
	if(!RecordApp.Current){
		reclog("需先调用RequestPermission");
		return;
	};
	if(RecordApp.Current==RecordApp.Platforms.Weixin){
		reclog("正在使用微信JsSDK，录音过程中不会有任何回调，不要惊慌");
	};
	
	var type=$("[name=type]:checked").val();
	var bit=+$(".bit").val();
	var sample=+$(".sample").val();
	var wave,waveSet=$(".recwaveSet")[0].checked;
	var set={
		type:type
		,bitRate:bit
		,sampleRate:sample
	};
	curSet=null;
	RecordApp.Start(set,function(){
		curSet=set;
		reclog(RecordApp.Current.Key+"已打开:"+type+" "+bit+"kbps");
		
		wave=Recorder.WaveView({elem:".recwave"});
	},function(err){
		reclog(RecordApp.Current.Key+"打开失败："+err);
	});
	RecordApp.OnProcess=function(buffers,level,time,sampleRate){
		$(".recpowerx").css("width",level+"%");
		$(".recpowert").html(time+"/"+level);
		
		waveSet && wave.input(buffers[buffers.length-1],level,sampleRate);
	};
};
var recblob={};
function recstop(batCall){
	if(!curSet){
		reclog("请先开始录音");
		return;
	};
	var setData=curSet;
	curSet=null;
	
	reclog(RecordApp.Current.Key+"正在结束"+setData.type+"...");
	var t1=Date.now();
	RecordApp.Stop(function(blob,time){
		var add=function(tag,blob,set){
			var id=RandomKey(16);
			recblob[id]={blob:blob,set:$.extend({},set),time:time};
			reclog(tag+":"+intp(set.bitRate,3)+"kbps "+intp(set.sampleRate,5)+"hz 花"+intp(Date.now()-t1,4)+"ms编码"+intp(blob.size,6)+"b ["+set.type+"]"+intp(time,6)+'ms <button onclick="recdown(\''+id+'\')">下载</button> <button onclick="recplay(\''+id+'\')">播放</button> <span class="p'+id+'"></span> <span class="d'+id+'"></span>');
		};
		
		var wxData=setData.DownWxMediaData;//微信JsSDK 下载到的音频源文件
		if(wxData){
			var list=wxData.list;
			delete wxData.list;
			
			reclog("<span style='color:#0b1'>发现微信JsSDK录制的源文件，共"+list.length+"段，时间统计："+JSON.stringify(wxData)+"</span>");
			if(!Recorder.AMR){
				reclog("<span style='color:#fb0'>播放需要上面点击换到amr类型，加载amr解码器，目前未加载<span>");
			};
			
			var timex=time;
			var t1x=t1;
			t1=Date.now();
			for(var i=0;i<list.length;i++){
				var obj=list[i];
				var bstr=atob(obj.data),n=bstr.length,u8arr=new Uint8Array(n);
				while(n--){
					u8arr[n]=bstr.charCodeAt(n);
				};
				var blob2=new Blob([u8arr], {type:obj.mime});
				time=obj.duration;
				add("<span style='color:#0b1'>微信源片段"+(i+1)+"</span>",blob2,{type:/\/(\w+)/.exec(obj.mime)[1]});
			};
			t1=t1x;
			time=timex;
		};
		add("已录制",blob,setData);
	},function(s){
		reclog("失败："+s);
	});
};
var intp=function(s,len){
	s=s==null?"-":s+"";
	if(s.length>=len)return s;
	return ("_______"+s).substr(-len);
};
function recplay(key){
	var o=recblob[key];
	if(o){
		var audio=$(".recPlay")[0];
		audio.controls=true;
		if(!(audio.ended || audio.paused)){
			audio.pause();
		};
		o.play=(o.play||0)+1;
		var logmsg=function(msg){
			$(".p"+key).html('<span style="color:green">'+o.play+'</span> '+new Date().toLocaleTimeString()+" "+msg);
		};
		logmsg("");
		
		var end=function(blob){
			audio.src=URL.createObjectURL(blob);
			audio.play();
		};
		var wav=Recorder[o.set.type+"2wav"];
		if(wav){
			logmsg("正在转码成wav...");
			wav(o.blob,function(blob){
				end(blob);
				logmsg("已转码成wav播放");
			},function(msg){
				logmsg("转码成wav失败："+msg);
			});
		}else{
			end(o.blob);
		};
	};
};
function recdown(key){
	var o=recblob[key];
	if(o){
		var cls=RandomKey(16);
		var name="rec-"+o.time+"ms-"+o.set.bitRate+"kbps-"+o.set.sampleRate+"hz."+o.set.type;
		
		o.down=(o.down||0)+1;
		$(".d"+key).html('<span style="color:red">'+o.down+'</span> <span class="'+cls+'"> 没弹下载？试一下链接或复制文本<button onclick="recdown64(\''+key+'\',\''+cls+'\')">生成Base64文本</button></span>');
		
		var downA=document.createElement("A");
		downA.innerHTML="下载 "+name;
		downA.href=URL.createObjectURL(o.blob);
		downA.download=name;
		$("."+cls).prepend(downA);
		downA.click();
	};
};
function recdown64(key, cls){
	var o=recblob[key];
	
	var reader = new FileReader();
	reader.onloadend = function() {
		var id=RandomKey(16);
		$("."+cls).append('<textarea class="'+id+'"></textarea>');
		$("."+id).val(reader.result);
	};
	reader.readAsDataURL(o.blob);
};
reclog("点击录制开始哦");
reclog("WaveView Extensions已启用");
</script>




















<hr>
<div>
<h3>移动端js运行简易控制台</h3>
<textarea id="cmdExecTxt" style="width:300px;height:160px;" placeholder="js代码，为一段表达式，可以返回结果显示。异步可读写JsVal.value，为结果输入框内容">"AlwaysUseWeixinJS: "+RecordApp.AlwaysUseWeixinJS</textarea>
<input type="button" value="执行js" onclick="cmdExec()">
<textarea id="cmdExecVal" style="width:300px;height:160px;" placeholder="运行结果"></textarea>
<script>
var JsVal;
var cmdExec=function(){
	JsVal=document.getElementById("cmdExecVal");
	JsVal.value="";
	
	var cmd=document.getElementById("cmdExecTxt").value;
	var val="";
	try{
		val=eval(cmd);
	}catch(e){
		val="执行出错："+(e.stack||e.message);
	};
	JsVal=document.getElementById("cmdExecVal");
	JsVal.value+=(JsVal.value?"\n":"")+val;
};
</script>

<h3>ConsoleX:</h3>
<textarea class="Xlog" style="width:300px;height:160px;"></textarea>
<script>
var XLogInput=$(".Xlog")[0];
(function(){
if(!/mobile/i.test(navigator.userAgent)){
	XLogInput.value="非移动端不开启ConsoleX引擎";
	return;
};
var ConsoleX=function(tag,arr){
	if(parent!=window){
		parent.ConsoleX(tag,arr);
		return;
	};
	
	ConsoleX.log(tag,arr);
};
var logx=console.log;
var infox=console.info;
var warnx=console.warn;
var errorx=console.error;
console.log=function(){
	ConsoleX("log",arguments);logx.apply(console,arguments);
};
console.info=function(){
	ConsoleX("info",arguments);infox.apply(console,arguments);
};
console.warn=function(){
	ConsoleX("warn",arguments);warnx.apply(console,arguments);
};
console.error=function(){
	ConsoleX("error",arguments);errorx.apply(console,arguments);
};
ConsoleX.log=function(tag,arr){
	var msg=[];
	for(var i=0;i<arr.length;i++){
		if(i!=0){
			msg.push("");
		}
		msg.push(xobjv(arr[i],1));
	};
	msg.push("---↑["+tag+"]"+new Date().toLocaleTimeString()+"↑---\n");
	XLogInput.value=msg.join("\n")+XLogInput.value;
};
function xobjv(v,deep){
	if(v===null)return "null";
	if(v==undefined)return "undefined";
	if(typeof(v)!="object"){
		v=v+"";
		if(v.length<500)return v;
		return v.substring(0,500)+"[省略"+(v.length-500)+"字]";
	}
	
	if(deep&&deep<=3){
		v= xobj(v,deep+1);
		if(deep==1){
			return xobjv(v);
		};
		return v;
	}
	return xobjv(v+"");
};
function xobj(obj,deep){
	if($.isArray(obj)){
		var arr=[];
		for(var i=0;i<obj.length;i++){
			arr.push(xobjv(obj[i],deep));
		};
	}else{
		var arr={};
		for(var k in obj){
			arr[k]=xobjv(obj[k],deep);
		};
	};
	if(deep>2){
		return arr;
	};
	return JSON.stringify(arr);
};

console.log("ConsoleX引擎已开启");
})();
</script>
</div>
<div style="padding:100px;"></div>
<!-- end 结束copy源码 -->






<script>
$(function(){
	var prev;
	$(".types").bind("click",function(e){
		var input=$(e.target);
		if(input[0].nodeName=="LABEL"){
			input=$(input).find("input");
		};
		if(prev!=input[0]){
			prev=input[0];
			loadEngine($(input));
		};
	});
});
function loadEngine(input){
	if(input.length&&input[0].nodeName=="INPUT"){
		var type=input.val();
		var engines=input.attr("engine").split(",");
		var end=function(){
			var enc=Recorder.prototype["enc_"+type];
			var tips=[!enc?"这个编码器无提示信息":type+"编码器"+(enc.stable?"稳定版":"beta版")+"，"+enc.testmsg];
			tips.push('<div style="color:green">');
			tips.push("【使用"+type+"录音需要在app.js Platforms.Default内注册】：");
			tips.push("src/recorder-core.js, src/engine/");
			tips.push(engines.join(".js, src/engine/"));
			tips.push(".js</div>");
			
			$(".typeTips").html(tips.join(""));
		};
		if(!Recorder.prototype[type]){
			reclog("正在加载"+type+"编码器...");
			var i=-1;
			var load=function(){
				i++;
				if(i>=engines.length){
					reclog(type+"编码器已准备好");
					end();
					return;
				}
				var elem=document.createElement("script");
				elem.setAttribute("type","text/javascript");
				elem.setAttribute("src",PageSet_RecordAppBaseFolder+"engine/"+engines[i]+".js");
				elem.onload=function(){
					load();
				};
				$("head")[0].appendChild(elem);
			};
			load();
		}else{
			end();
		};
	};
};
function onInstall(){
	loadEngine($(".initType"));
	
	$(".recinfo").html(BuildHtml($(".tp_recinfo").html()));
	if(!/:\/\/[^\/]*jiebian.life(\/|$)/.test(location.href)){
		reclog("<span style='color:red'>当前域名不在微信JsSDK绑定的域名中，无法使用JsSDK相关功能</span>");
	}else{
		reclog("此页面由服务器代理，源网址<a href='https://xiangyuecn.github.io/Recorder/app-support-sample/'>https://xiangyuecn.github.io/Recorder/app-support-sample/</a>");
	};
};
if(isInstall){
	onInstall();
};
</script>

</body>
</html>