我正在使用此网站https://subinsb.com/html5-record-mic-voice的jquery插件,我在90秒后制作录音时遇到问题 这是代码,我在JS方面不是很好,所以感谢所有帮助的人
var recLength = 0,
recBuffersL = [],
recBuffersR = [],
sampleRate;
this.onmessage = function(e) {
switch (e.data.command) {
case 'init':
init(e.data.config);
break;
case 'record':
record(e.data.buffer);
break;
case 'exportWAV':
exportWAV(e.data.type);
break;
case 'getBuffer':
getBuffer();
break;
case 'clear':
clear();
break;
}
};
function init(config) {
sampleRate = config.sampleRate;
}
function record(inputBuffer) {
recBuffersL.push(inputBuffer[0]);
recBuffersR.push(inputBuffer[1]);
recLength += inputBuffer[0].length;
}
function exportWAV(type) {
var bufferL = mergeBuffers(recBuffersL, recLength);
var bufferR = mergeBuffers(recBuffersR, recLength);
var interleaved = interleave(bufferL, bufferR);
var dataview = encodeWAV(interleaved);
var audioBlob = new Blob([dataview], {
type: type
});
this.postMessage(audioBlob);
}
function getBuffer() {
var buffers = [];
buffers.push(mergeBuffers(recBuffersL, recLength));
buffers.push(mergeBuffers(recBuffersR, recLength));
this.postMessage(buffers);
}
function clear() {
recLength = 0;
recBuffersL = [];
recBuffersR = [];
}
function mergeBuffers(recBuffers, recLength) {
var result = new Float32Array(recLength);
var offset = 0;
for (var i = 0; i < recBuffers.length; i++) {
result.set(recBuffers[i], offset);
offset += recBuffers[i].length;
}
return result;
}
function interleave(inputL, inputR) {
var length = inputL.length + inputR.length;
var result = new Float32Array(length);
var index = 0,
inputIndex = 0;
while (index < length) {
result[index++] = inputL[inputIndex];
result[index++] = inputR[inputIndex];
inputIndex++;
}
return result;
}
function floatTo16BitPCM(output, offset, input) {
for (var i = 0; i < input.length; i++, offset += 2) {
var s = Math.max(-1, Math.min(1, input[i]));
output.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));
}
}
function encodeWAV(samples) {
var buffer = new ArrayBuffer(44 + samples.length * 2);
var view = new DataView(buffer);
/* 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, 2, 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, 4, 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);
return view;
}
//------I guess problem is below--------------------------------------------
function restore() {
$("#record,#live").removeClass("disabled");
$(".one").addClass("disabled");
$.voice.stop();
}
$(document).ready(function() {
$(document).on("click", "#record:not(.disabled)", function() {
$("#ex1").css({
opacity: 1
});
$("#prepare").animate({
backgroundPosition: '0px,0px,0px,0px'
}, 1000).queue(function() {
$("#rec-progress").animate({
backgroundPosition: '0px,0px,0px,0px'
}, 5000);
/*I need to stop recording somewere here, I tried put .delay(30000).stop,
and things like that, but there were wrong ideas*/
elem = $(this);
$.voice.record($("#live").is(":checked"), function() {
elem.addClass("disabled");
$("#live").addClass("disabled");
$("#stop,#play,#download").removeClass("disabled");
});
});
});
$(document).on("click", "#stop:not(.disabled)", function() {
restore();
});
$(document).on("click", "#play:not(.disabled)", function() {
$.voice.export(function(url) {
$("#audio").attr("src", url);
$("#audio")[0].play();
}, "URL");
restore();
});
$(document).on("click", "#download:not(.disabled)", function() {
$.voice.export(function(url) {
$("<a href='" + url + "' download='MyRecording.wav'></a>")[0].click();
}, "URL");
restore();
});
});
&#13;
* {
margin 0px;
padding: 0px;
}
h2 {
font-family: Tahoma, arial;
font-size: 2em;
width: 500px;
display: block;
margin-left: 50%;
left: -250px;
position: relative;
text-align: center;
}
body {
background: grey;
}
#progress-bar {
height: 100px;
width: 00px;
margin-left: 50%;
z-index: 10;
left: -350px;
position: relative;
}
#prepare {
background: url(https://disk.yandex.ru/preview/?id=/disk/bar.png&size=800x);
z-index: -10;
overflow: hidden;
height: 100px;
background-position: -610px, 0px, 0px, 0px;
background-repeat: no-repeat;
width: 700px;
position: absolute;
top: 0px
}
#rec-progress {
background: url(https://disk.yandex.ru/preview/?id=/disk/rec.png&size=800x);
z-index: -5;
overflow: hidden;
height: 100px;
background-position: -610px, 0px, 0px, 0px;
background-repeat: no-repeat;
width: 700px;
position: absolute;
top: 0px
}
#interface {
width: 596px;
height: 100px;
margin-left: 50%;
left: -315px;
position: relative;
}
#content {
height: 1000px;
}
#ex1 {
background: url(ex1/type1.bmp);
width: 100%;
min-width: 1340px;
min-height: 200px;
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
}
.button {
width: 120px;
display: inline-block;
vertical-align: middle;
margin: 0px auto;
padding: 5px 12px;
cursor: pointer;
outline: none;
font-size: 13px;
text-decoration: none !important;
text-align: center;
color: #fff;
background-color: #4D90FE;
background-image: linear-gradient(top, #4D90FE, #4787ED);
background-image: -ms-linear-gradient(top, #4D90FE, #4787ED);
background-image: -o-linear-gradient(top, #4D90FE, #4787ED);
background-image: linear-gradient(top, #4D90FE, #4787ED);
border: 1px solid #4787ED;
box-shadow: 0 1px 3px #BFBFBF;
}
a.button {
color: #fff;
}
.button:hover {
box-shadow: inset 0px 1px 1px #8C8C8C;
}
.button.disabled {
box-shadow: none;
opacity: 0.7;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://lab.subinsb.com/projects/jquery/core/jquery-2.1.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="cdn/recorder.js"></script>
<script src="http://lab.subinsb.com/projects/jquery/voice/jquery.voice.min.js"></script>
<link rel="stylesheet" type="text/css" href="cdn/main.css">
<script src="cdn/jquery.backgroundpos.min.js"></script>
<script src="cdn/record.js"></script>
<style src="cdn/main.css"></style>
<title>Title</title>
</head>
<body>
<div id="content">
<h2>Example</h2>
<div id="progress-bar">
<img src="https://disk.yandex.ru/preview/?id=/disk/progress.png&size=800x">
<div id="rec-progress"></div>
<div id="prepare"></div>
</div>
<div id="interface">
<a class="button" id="record">Start</a>
<a class="button disabled one" id="stop">restart</a>
<a class="button disabled one" id="play">listen</a>
<a class="button disabled one" id="download">save</a>
</div>
<div id="ex1"></div>
</div>
<audio controls src="" id="audio"></audio>
</body>
</html>
&#13;