我拼凑了一个Javascript录音机，它通过getUserMedia获取用户麦克风，并记录和输出一个.OGG文件以供下载。注意，这只适用于Firefox，这对我来说很好
我不希望提供下载链接，而是希望文件在停止录制后立即通过PHP上传到服务器。我不知道该怎么做。我尝试过使用一个表单从$_FILES中获取它，但我不知道如何用要提交的BLOB预填充表单。
这是我迄今为止所拥有的。任何关于如何通过PHP将其转移到服务器的输入都将不胜感激！
<html>
<head>
</head>
<body>
<div id="container">
<audio controls autoplay></audio>
<a id="downloadLink" download="mediarecorder.ogg" name="mediarecorder.ogg" href></a>
<p id="data"></p>
<script >
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var constraints = {audio: true};
var audioElement = document.querySelector('audio');
var dataElement = document.querySelector('#data');
var downloadLink = document.querySelector('a#downloadLink');
function errorCallback(error){
console.log("navigator.getUserMedia error: ", error);
}
var count = 0;
function startRecording(stream) {
log('Starting...');
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.onerror = function(e){
log('Error: ' + e);
};
mediaRecorder.onstart = function(e){
log('Started');
};
mediaRecorder.onstop = function(e){
log('Stopped');
};
mediaRecorder.onwarning = function(e){
log('Warning: ' + e);
};
// parameter is number of milliseconds of data to return in a single Blob
mediaRecorder.start();
window.setTimeout(function(){
mediaRecorder.stop();
}, 2400000);
}
window.onload = function(){
if (typeof MediaRecorder === 'undefined' || !navigator.getUserMedia) {
alert('Sorry! This demo requires Firefox Nightly.');
} else {
window.onkeydown = function(e){
if ( e.keyCode == 82 ) { //R pressed
navigator.getUserMedia(constraints, startRecording, errorCallback);
} else if ( e.keyCode == 83 ) { // S pressed
mediaRecorder.stop();
mediaRecorder.ondataavailable = function(e) {
log('Data available...');
count++;
if (count > 1) {
return;
}
console.log(e);
audioElement.src = window.URL.createObjectURL(e.data);
downloadLink.href = window.URL.createObjectURL(e.data); //Audio BLOB
downloadLink.innerHTML = "Download ogg audio file";
};
}
}
}
};
function log(message){
dataElement.innerHTML = message + '<br>' + dataElement.innerHTML ;
}
</script>
</div>
</body>
</html>
在大多数浏览器中，出于安全原因，不允许预先填充html上传元素。是本地存储的ogg文件（在客户端上）。如果它存储在Web服务器上，则可以选择将（公共可用）url发布到php脚本中，并使用file_get_contents打开它。