Dan*_*n W 6 html javascript jquery html5
可能是在Jquery或Javascript中,没有使用库来录制X秒的音频并保存到音频文件中.我看过getUserMedia,我发现它可以从网络摄像头中检索音频和视频.我目前正在使用带有另一个库的网络摄像头:Clmtracker,因此我想尝试在没有任何外部库的情况下执行此操作.
我想将录制的音频存储在div中.我正在拍照并为其分配一个唯一的名称,所以我想知道如何捕获一小段音频并将其存储在同一个生成的div中.
问题:如何从网络摄像头获取5秒钟的音频?子问题:如何将其存储在div中的元素中?
我的代码用于在我的页面上捕获Img和数据
function capturePage() {
var now = new Date();
if (nextAllowedCapture <= now) {
// Do capture logic
audioElement.play();
counting++
console.log("Capturing...");
$(".capturing").show().delay(500).fadeOut(3000);
var innerDiv = document.createElement('div'),
innerDivImg = document.createElement('canvas'),
image = document.createElement('img'),
ul = document.createElement('ul');
innerDiv.className = 'divCreate';
innerDiv.id = 'img' + counting;
innerDivImg.height = 450;
innerDivImg.width = 600;
innerDivImg.getContext('2d').drawImage(vid, 0, 0);
image.id = 'image' + counting;
image.src = innerDivImg.toDataURL();
image.className = 'divCreateImg';
innerDiv.appendChild(image);
innerDiv.appendChild(ul);
document.getElementById('galleryWrapper').appendChild(innerDiv);
$('#measurements h4').each(function () {
$("#" + innerDiv.id + " " + 'ul').append('<li>' + $(this).text() + ': ' + $(this).next().text());
});
nextAllowedCapture = new Date();
nextAllowedCapture.setSeconds(nextAllowedCapture.getSeconds() + coolDownSeconds);
} else {
nextCapTime = (nextAllowedCapture.getTime() - now.getTime()) / 1000;
console.log("Can't capture again yet. This function can be executed again in " +
(nextAllowedCapture.getTime() - now.getTime()) / 1000 +
" seconds.");
}
}
Run Code Online (Sandbox Code Playgroud)
你可以看到Recorder.js的代码作为一个例子来实现捕获音频功能,并使用getUserMedia和wbit格式将其保存为wav格式,只需要html5和javascript.
现在你可能会说你没有任何插件就问过.事实上,我检查了recorder.js的代码,它只有90行简单的javascript,只有html5和javascript.
更新:我发现了一个在线演示实验,它似乎工作正常,所有源代码都是开放的.你可能想检查一下.这是链接: 记录器JS
这是另一个调整它并使其更具功能性的链接. 仅使用HTML5和JavaScript录制MP3
归档时间: |
|
查看次数: |
9673 次 |
最近记录: |