assets/工具-裸PCM转WAV播放测试.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">
<link rel="shortcut icon" type="image/png" href="icon.png">

<title>裸(RAW、WAV)PCM转WAV播放测试和转码</title>
</head>

<body>
<div style="padding-top:30px;font-size:24px;font-weight:bold;text-align:center;color:#0b1;">把裸(RAW、WAV)PCM数据文件拖入此页面即可生成.wav文件，然后可转码成其他格式</div>
<div style="text-align:center;padding-top:15px;">
	<input type="file" multiple="multiple" onchange="choiceFile(this)" style="width:80%;line-height:60px;font-size:24px;color:#fff; background:#0b1;">
	<div style="color:#0b1;">本工具用来对原始的PCM音频数据进行封装、播放、转码，操作极其简单，免去了动用二进制编辑工具操作的麻烦。比如加工一下Android AudioRecord(44100)采集的音频。</div>
	<div style="color:#F90;">.wav（raw pcm format）文件可以反复拖入，只不过前44字节wav头会被删除而已</div>
	<div style="color:#0b1">一次拖入多个文件时将按文件名排序，然后合并成一个wav文件，音频参数以第一个为准</div>
	<div style="color:#F00">乱填采样率、位数，会变声</div>
	<div style="color:#F0f">除了PCM数据文件外，其他格式文件拖入可能导致惊悚的播放效果</div>
	<div><a href="https://github.com/xiangyuecn/Recorder">https://github.com/xiangyuecn/Recorder</a></div>
</div>

<div><audio id="recPlayAudio" style="width:100%"></audio></div>

<div id="list"></div>

<div id="mockTransformDiv" style="display:none;width:98%; border:4px solid #0B1;margin:20px 0;">
	<div id="mockTransformMsg"></div>
	<iframe class="mockTransformIframe" style="width:100%;height:400px;"></iframe>
</div>

<script>
document.body.ondragover=function(e){
	e.preventDefault();
};
document.body.ondrop=function(e){
	e.preventDefault();
	
	readFile(e.dataTransfer.files);
};
function choiceFile(elem){
	readFile(elem.files);
};
function readFile(files){
	if(!files.length){
		return;
	};
	
	var div=document.createElement("div");
	list.prepend?list.prepend(div):list.appendChild(div);
	div.appendChild(document.createTextNode(new Date().toLocaleTimeString()+" "+files.length+"个 "));
	
	//根据名称排序
	var fs=[];
	for(var i=0;i<files.length;i++){
		fs.push(files[i]);
	};
	fs.sort(function(a,b){
		return a.name.localeCompare(b.name);
	});
	files=fs;
	
	var idx=-1,datas=[],lens=0,info;
	var read=function(){
		idx++;
		if(idx>=files.length){
			var arr=new Uint8Array(lens+lens%2);
			for(var i=0,j=0;i<datas.length;i++){
				arr.set(datas[i],j);
				j+=datas[i].length;
			};
			createWav(arr,info,files[0].name,div);
			return;
		};
		
		var file = files[idx];
		var reader = new FileReader();
		reader.onload = function(e){
			var arr=new Uint8Array(e.target.result);
			
			//处理wav头
			if(/\.wav$/i.test(file.name)){
				console.log("发现wav文件,开始解析...");
				var o=skipWavHead(arr);
				if(o){
					arr=o.u8arr;
					info||(info=o.info);
				};
			};
			
			datas.push(arr);
			lens+=arr.length;
			read();
		}
		reader.readAsArrayBuffer(file);
	};
	read();
};

var skipWavHead=function(wavView){
	var eq=function(p,s){
		for(var i=0;i<s.length;i++){
			if(wavView[p+i]!=s.charCodeAt(i)){
				return false;
			};
		};
		return true;
	};
	if(eq(0,"RIFF")&&eq(8,"WAVEfmt ")){
		if(wavView[20]==1 && wavView[22]==1){//raw pcm 单声道
			var sampleRate=wavView[24]+(wavView[25]<<8)+(wavView[26]<<16)+(wavView[27]<<24);
			var bitRate=wavView[34]+(wavView[35]<<8);
			console.log("wav info",sampleRate,bitRate);
			
			return {
				u8arr:new Uint8Array(wavView.buffer.slice(44))
				,info:{bitRate:bitRate,sampleRate:sampleRate}
			};
		};
	};
	
	console.log("非单声道wav raw pcm格式音频，不进行任何解析");
};





var createWav=function(arr,info,fileName,div){
	var instr=prompt("请输入 "+fileName+" 的\"采样率.位数-新采样率:结束毫秒:开始毫秒\"(默认16位)，如：16000（8位的需填位数16000.8，新采样16000-8000）",info?info.sampleRate+"."+info.bitRate:"");
	
	var sampleRate=0,bitRate=16,sampleRateNew=0,subA=0,subB=0;
	if(/^(\d+)(?:\.(\d+))?(?:\-(\d+))?(?:\:(\d+))?(?:\:(\d+))?$/.test(instr)){
		sampleRate=+RegExp.$1;
		bitRate=+RegExp.$2==8?8:16;
		sampleRateNew=+RegExp.$3||sampleRate;
		
		subB=+RegExp.$4||0;
		subA=+RegExp.$5||0;
	};
	if(sampleRate<6000||sampleRateNew<6000){
		div.appendChild(document.createTextNode("乱填采样率："+sampleRate+" "+sampleRateNew));
		return;
	};
	
	
	if(bitRate==16){
		var res=new Int16Array(arr.buffer);
	}else{
		var res=new Int16Array(arr.length);
		//8位转成16位
		for(var j=0;j<arr.length;j++){
			var b=arr[j];
			res[j]=(b-128)<<8;
		};
	};
	function sampleData(data, newSampleRate, oldSampleRate) {
		var step=oldSampleRate/newSampleRate;
		var fitCount = Math.floor(data.length / step);
		var newData = new Int16Array(fitCount);
		for (var i = 0; i < fitCount; i++) {
			var tmp = i * step;
			var before = Math.floor(tmp);
			var after = Math.ceil(tmp);
			var atPoint = tmp - before;
			
			newData[i] = data[before]+(data[after]-data[before])*atPoint;
		}
		return newData;
	};
	if(sampleRate>sampleRateNew){
		res=sampleData(res,sampleRateNew,sampleRate);
		sampleRate=sampleRateNew;
	};
	
	//截取
	if(subA||subB){
		res=res.subarray(Math.round(subA*sampleRate/1000),subB?Math.round(subB*sampleRate/1000):res.length);
	};
	var size=res.length;
	var duration=Math.floor(size/sampleRate*1000);
	
	//编码数据 https://github.com/mattdiamond/Recorderjs https://www.cnblogs.com/blqw/p/3782420.html https://www.cnblogs.com/xiaoqi/p/6993912.html
	var dataLength=size*(bitRate/8);
	var buffer=new ArrayBuffer(44+dataLength);
	var data=new DataView(buffer);
	
	var offset=0;
	var writeString=function(str){
		for (var i=0;i<str.length;i++,offset++) {
			data.setUint8(offset,str.charCodeAt(i));
		};
	};
	var write16=function(v){
		data.setUint16(offset,v,true);
		offset+=2;
	};
	var write32=function(v){
		data.setUint32(offset,v,true);
		offset+=4;
	};
	
	/* RIFF identifier */
	writeString('RIFF');
	/* RIFF chunk length */
	write32(36+dataLength);
	/* RIFF type */
	writeString('WAVE');
	/* format chunk identifier */
	writeString('fmt ');
	/* format chunk length */
	write32(16);
	/* sample format (raw) */
	write16(1);
	/* channel count */
	write16(1);
	/* sample rate */
	write32(sampleRate);
	/* byte rate (sample rate * block align) */
	write32(sampleRate*(bitRate/8));
	/* block align (channel count * bytes per sample) */
	write16(bitRate/8);
	/* bits per sample */
	write16(bitRate);
	/* data chunk identifier */
	writeString('data');
	/* data chunk length */
	write32(dataLength);
	// 写入采样数据
	if(bitRate==8) {
		for(var i=0;i<size;i++,offset++) {
			//16转8据说是雷霄骅的 https://blog.csdn.net/sevennight1989/article/details/85376149 细节比blqw的按比例的算法清晰点，虽然都有明显杂音
			var val=(res[i]>>8)+128;
			data.setInt8(offset,val,true);
		};
	}else{
		for (var i=0;i<size;i++,offset+=2){
			data.setInt16(offset,res[i],true);
		};
	};
	
	
	var blob=new Blob([data.buffer],{type:"audio/wav"});
	var name=fileName+"-"+duration+"ms"+"-"+bitRate+"bit-"+sampleRate+"hz.wav";
	var url=(window.URL||webkitURL).createObjectURL(blob);
	
	var id=++rnd;
	pcms[id]={
		name:fileName
		,pcm:res
		,sampleRate:sampleRate
		,bitRate:bitRate
		,duration:duration
		
		,blob:blob
	};
	console.log(pcms[id]);
	
	div.innerHTML=id+". "+div.innerHTML+" 【"+name+'】'+blob.size+'b <a download="'+name+'" href="'+url+'">下载</a> <button onclick="mockTransform('+id+')">转码</button> <button onclick="recplay('+id+',\''+url+'\')">播放</button> <span id="playc'+id+'" style="color:#0b1;"></span>';
};
var rnd=0;
var pcms={};








function recplay(id,url){
	var c=window["playc"+id];
	c.innerHTML=(+c.innerHTML||0)+1;
	
	var audio=recPlayAudio;
	audio.controls=true;
	if(!(audio.ended || audio.paused)){
		audio.pause();
	};
	audio.src=url;
	audio.play();
};






var isSetIframe=false;
function mockTransform(id){
	mockTransformDiv.style.display="block";
	if(location.protocol.indexOf("http")!=0){
		mockTransformMsg.innerHTML='<span style="color:red">因为转码需要写配置输入界面，就拿测试页面来用了（懒），所以需要在http环境下才能加载同域页面</span>';
		return;
	};
	var iframe=document.querySelector(".mockTransformIframe");
	
	if(isSetIframe){
		var msg="";
		try{
			var win=iframe.contentWindow;
			if(win.Recorder){
				var wav=pcms[id];
				
				win.rec=win.Recorder();
				win.rec.mock(wav.pcm,wav.sampleRate);
				
				mockTransformMsg.innerHTML='<span style="color:#0b1;">'+id+". 已注入pcm数据，请点击批量编码进行转换。"+(new Date().toLocaleTimeString())+"</span> 因为转码需要写配置输入界面，就拿测试页面来用了（懒）";
				return;
			};
		}catch(e){
			console.error(e)
			msg="注入异常：也许还没有准备好..."+e.stack;
		};
		mockTransformMsg.innerHTML='<span style="color:red">'+(msg||"页面未准备好，请稍后再试...")+'</span>'
	}else{
		isSetIframe=true;
		
		iframe.src="../index.html?ispcm=1";
		iframe.onload=function(){
			mockTransform(id);
		};
		mockTransformMsg.innerHTML="请稍后，正在加载页面...";
	};
};
</script>

<!-- 加载打赏挂件 -->
<div class="DonateLogs"></div>
<div class="DonateView"></div>
<div style="padding-bottom:600px"></div>
<script src="zdemo.widget.donate.js"></script>
<script>
DonateWidget({
	log:function(msg){var div=document.createElement("div");div.innerHTML=msg;document.querySelector(".DonateLogs").appendChild(div)}
	,mobElem:document.querySelector(".DonateView")
});
</script>

</body>
</html>