HTML5 录制不工作
Posted
技术标签:
【中文标题】HTML5 录制不工作【英文标题】：HTML5 Recording Not Working 【发布时间】：2016-07-14 07:16:25 【问题描述】：我在网页中写了录制的测试代码，导出的wav文件可以播放，但是完全错误，只是一些无意义的声音，VLC中的持续时间不正确。请看一下代码有没有错误。
<html>
<head></head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<button id='start'>Start</button>
<button id='stop'>Stop</button>
<button id='export'>Export</button>
<script>
var isRecording = false;
var buf = [];
var totalLen = 0;
var channelNum = 1;
var sampleRate = 48000;
$('#start').click(function()
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
window.URL = window.URL || window.webkitURL;
var cxt = new AudioContext();
isRecording = true;
navigator.getUserMedia(audio:true, function(stream)
var streamNode = cxt.createMediaStreamSource(stream);
var processNode = (cxt.createScriptProcessor || cxt.createjavascriptNode).call(cxt, 1024 * 2, channelNum, channelNum);
processNode.onaudioprocess = function(e)
if(!isRecording) return;
var f = e.inputBuffer;
var cdata = f.getChannelData(channelNum -1);
buf.push(cdata);
totalLen += cdata.length;
;
streamNode.connect(processNode);
processNode.connect(cxt.destination);
, function());
);
$('#stop').click(function()
isRecording = false;
);
$('#export').click(function()
var oneBuf = new Float32Array(totalLen);
var offset = 0;
for(var i=0;i<buf.length;++i)
oneBuf.set(buf[i], offset);
offset += buf[i].length;
var encodedBuf = encodeWAV(oneBuf);
var blob = new Blob([encodedBuf], type:'audio/wav');
console.log(encodedBuf);
var url = URL.createObjectURL(blob);
var hf = document.createElement('a');
hf.download = '1.wav';
hf.innerHTML = hf.download;
hf.href = url;
$('body').append(hf);
);
function encodeWAV(samples)
var arr = new ArrayBuffer(44 + samples.length * 2);
var view = new DataView(arr);
/* RIFF identifier */
writeString(view, 0, 'RIFF');
/* RIFF chunk length */
view.setUint32(4, 36 + samples.length * 2, true);
/* RIFF type */
writeString(view, 8, 'WAVE');
/* format chunk identifier */
writeString(view, 12, 'fmt ');
/* format chunk length */
view.setUint32(16, 16, true);
/* sample format (raw) */
view.setUint16(20, 1, true);
/* channel count */
view.setUint16(22, channelNum, true);
/* sample rate */
view.setUint32(24, sampleRate, true);
/* byte rate (sample rate * block align) */
view.setUint32(28, sampleRate * 4, true);
/* block align (channel count * bytes per sample) */
view.setUint16(32, channelNum * 2, true);
/* bits per sample */
view.setUint16(34, 16, true);
/* data chunk identifier */
writeString(view, 36, 'data');
/* data chunk length */
view.setUint32(40, samples.length * 2, true);
floatTo16BitPCM(view, 44, samples);
console.log('my samplerate:%d', sampleRate);
return view;
function floatTo16BitPCM(view, offset, input)
for (var i = 0; i < input.length; i++, offset += 2)
var s = Math.max(-1, Math.min(1, input[i]));
view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
function writeString(view, offset, string)
for (var i = 0; i < string.length; i++)
view.setUint8(offset + i, string.charCodeAt(i));
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：经过一番调查。我发现了问题。
var cdata = f.getChannelData(channelNum -1);
buf.push(cdata);
变量buf 存储来自音频缓冲区的声音数据，但仅存储缓冲区引用。缓冲区由低级代码不断更新。因此，buf 存储存储相同缓冲区的数组。这就是为什么VLC播放的声音毫无意义。
改成下面代码后，代码运行正常：
var cdata = f.getChannelData(channelNum -1);
buf.push(cdata.slice());
但仍然不知道为什么当前 VLC 中的持续时间值不正确。
【讨论】：
以上是关于HTML5 录制不工作的主要内容，如果未能解决你的问题，请参考以下文章