提示wav和pcm的转换方法

Baogh · Jul 18, 2019 · cb9b124 · cb9b124
1 parent fe8cf17
commit cb9b124
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 # :open_book:Recorder用于html5录音
 
-[在线测试](https://xiangyuecn.github.io/Recorder/)，支持大部分已实现`getUserMedia`的移动端、PC端浏览器；主要包括：Chrome、Firefox、Safari、Android WebView、腾讯Android X5内核(QQ、微信)；不支持：UC系内核（典型的支付宝，大部分国产手机厂商的浏览器）。快捷方式：[查看浏览器支持情况](https://caniuse.com/#search=getUserMedia)，[工具-裸PCM转WAV播放测试](https://xiangyuecn.github.io/Recorder/assets/%E5%B7%A5%E5%85%B7-%E8%A3%B8PCM%E8%BD%ACWAV%E6%92%AD%E6%94%BE%E6%B5%8B%E8%AF%95.html)。
+[在线测试](https://xiangyuecn.github.io/Recorder/)，支持大部分已实现`getUserMedia`的移动端、PC端浏览器；主要包括：Chrome、Firefox、Safari、Android WebView、腾讯Android X5内核(QQ、微信)；不支持：UC系内核（典型的支付宝，大部分国产手机厂商的浏览器）。快捷方式: [查看caniuse浏览器支持情况](https://caniuse.com/#search=getUserMedia) , [【工具】裸(RAW、WAV)PCM转WAV播放测试和转码](https://xiangyuecn.github.io/Recorder/assets/%E5%B7%A5%E5%85%B7-%E8%A3%B8PCM%E8%BD%ACWAV%E6%92%AD%E6%94%BE%E6%B5%8B%E8%AF%95.html) 。
 
-录音默认输出mp3格式，另外可选wav格式（此格式录音文件超大）；有限支持ogg(beta)、webm(beta)、amr(beta)格式；支持任意格式扩展（前提有相应编码器）。
+录音默认输出mp3格式，另外可选wav格式（raw pcm format此格式录音文件超大）；有限支持ogg(beta)、webm(beta)、amr(beta)格式；支持任意格式扩展（前提有相应编码器）。
 
 mp3默认16kbps的比特率，2kb每秒的录音大小，音质还可以（如果使用8kbps可达到1kb每秒，不过音质太渣）；本库期待的使用场景是简短的语音录制，因此音质只要不比高品质的感觉差太多就行；1分钟的语音进行编码是很快的，但如果录制超长的录音，比如10分钟以上，编码会花费比较长的时间，因为并未采用边录边转码的worker方案。
 
-mp3使用lamejs编码，压缩后的recorder.mp3.min.js文件150kb左右（开启gzip后54kb）。如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav编码器，源码不足300行，压缩后的recorder.wav.min.js不足4kb。
+mp3使用lamejs编码，压缩后的recorder.mp3.min.js文件150kb左右（开启gzip后54kb）。如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav(raw pcm format)编码器，源码不足300行，压缩后的recorder.wav.min.js不足4kb。
 
 浏览器Audio Media[兼容性](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility)mp3最好，wav还行，其他要么不支持播放，要么不支持编码。
 
@@ -298,9 +298,12 @@ npm start
 # :open_book:关于现有编码器
 如果你有其他格式的编码器并且想贡献出来，可以提交新增格式文件的pull（文件放到/src/engine中），我们升级它。
 
-## wav
+## wav (raw pcm format)
 wav格式编码器时参考网上资料写的，会发现代码和别人家的差不多。源码2kb大小。
 
+### wav转pcm
+生成的wav文件内音频数据的编码为未压缩的pcm数据（raw pcm），只是在pcm数据前面加了一个44字节的wav头；因此直接去掉前面44字节就能得到原始的pcm数据，如：`blob.slice(44,blob.size,"audio/pcm")`;
+
 ## mp3
 采用的是[lamejs](https://github.com/zhuker/lamejs)(LGPL License)这个库的代码，`https://github.com/zhuker/lamejs/blob/bfb7f6c6d7877e0fe1ad9e72697a871676119a0e/lame.all.js`这个版本的文件代码；已对lamejs源码进行了部分改动，用于修复发现的问题。LGPL协议涉及到的文件：`mp3-engine.js`；这些文件也采用LGPL授权，不适用MIT协议。源码518kb大小，压缩后150kb左右，开启gzip后50来k。
 
@@ -357,6 +360,8 @@ rec.open(function(){
 });
 ```
 
+![](assets/use_wave.png)
+
 ### 【构造】wave=Recorder.WaveView(set)
 构造函数，`set`参数为配置对象，默认配置值如下：
 ``` javascript
@@ -417,6 +422,12 @@ public void onPermissionRequest(PermissionRequest request) {
 
 
 
+# :open_book:工具：裸(RAW、WAV)PCM转WAV播放测试和转码
+[在线访问](https://xiangyuecn.github.io/Recorder/assets/%E5%B7%A5%E5%85%B7-%E8%A3%B8PCM%E8%BD%ACWAV%E6%92%AD%E6%94%BE%E6%B5%8B%E8%AF%95.html)，本工具用来对原始的PCM音频数据进行封装、播放、转码，操作极其简单，免去了动用二进制编辑工具操作的麻烦。比如加工一下Android AudioRecord(44100)采集的音频。源码在`assets/工具-裸PCM转WAV播放测试.html`;
+
+![](assets/use_pcm_tool.png)
+
+
 # :open_book:关于微信JsSDK和RecordApp
 微信内浏览器他家的[JsSDK](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)也支持录音，涉及笨重难调的公众号开发（光sdk初始化就能阻碍很多新奇想法的产生，signature限制太多），只能满足最基本的使用（大部分情况足够了）。获取音频数据必须绕一个大圈：录好音了->上传到微信服务器->自家服务器请求微信服务器多进行媒体下载->保存录音（微信小程序以前也是二逼路子，现在稍微好点能实时拿到录音mp3数据）。
 

diff --git a/assets/use_pcm_tool.png b/assets/use_pcm_tool.png
diff --git a/assets/use_wave.png b/assets/use_wave.png
diff --git a/assets/工具-裸PCM转WAV播放测试.html b/assets/工具-裸PCM转WAV播放测试.html
@@ -4,7 +4,7 @@
 <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>工具-裸PCM转WAV播放测试</title>
+<title>裸(RAW、WAV)PCM转WAV播放测试和转码</title>
 
 <style>
 html,body{
@@ -14,10 +14,11 @@
 </head>
 
 <body>
-<div style="padding-top:30px;font-size:24px;font-weight:bold;text-align:center;color:#0b1;">把原始PCM数据文件拖入此页面即可生成wav文件</div>
+<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;">
-	<div style="color:#0b1;">本工具用来对原始PCM音频数据进行封装、播放，操作极其简单，免去了动用二进制编辑工具操作的麻烦。比如加工一下Android AudioRecord(44100)采集的音频。</div>
-	<div style="color:#F90;">wav文件可以反复拖入，只不过wav头会被当做音频内容而已</div>
+	<input type="file" 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:#F00">乱填采样率、位数，会变声</div>
 	<div style="color:#F0f">除了PCM数据文件外，其他格式文件拖入可能导致惊悚的播放效果</div>
 	<div><a href="https://github.com/xiangyuecn/Recorder">https://github.com/xiangyuecn/Recorder</a></div>
@@ -38,15 +39,25 @@
 };
 document.body.ondrop=function(e){
 	e.preventDefault();
+
+	readFile(e.dataTransfer.files);
+};
+function choiceFile(elem){
+	if(!elem.files.length){
+		return;
+	};
+	readFile(elem.files);
+};
+function readFile(files){
 	var div=document.createElement("div");
 	list.prepend(div);
 	div.append(new Date().toLocaleTimeString()+" ");
 
-	if(e.dataTransfer.files.length!=1){
+	if(files.length!=1){
 		div.append("请只拖入一个文件");
 		return;
 	}
-	var fileObj = e.dataTransfer.files[0];
+	var fileObj = files[0];
 	var fileReader = new FileReader();
 	fileReader.onload = function(e){
 		createWav(e.target.result,div,fileObj);
@@ -77,6 +88,28 @@
 		return;
 	};
 
+	//处理wav头
+	if(/\.wav$/i.test(fileObj.name)){
+		var arrView=new Uint8Array(arr);
+		var eq=function(p,s){
+			for(var i=0;i<s.length;i++){
+				if(arrView[p+i]!=s.charCodeAt(i)){
+					return false;
+				};
+			};
+			return true;
+		};
+		console.log("发现wav文件");
+
+		if(eq(0,"RIFF")&&eq(8,"WAVEfmt ")){
+			console.log("    wav 格式");
+			if(arrView[20]==1){
+				console.log("    raw pcm format wav");
+				arr=arr.slice(44);
+			};
+		};
+	};
+
 	if(bitRate==16){
 		var res=new Int16Array(arr,0,(arr.byteLength-arr.byteLength%2)/2);
 	}else{