目前，我有一个网站可以使用Matt Diamond的recorder.js + getUserMedia（Web音频API）录制音频。客户端完成录制后，我通过ajax发布将数据（.wav中）上传到文件系统。然后，我的服务器端Java将data.wav处理为其他格式。这很好。
但是，我担心ajax发布的性能/带宽问题，并希望探索将数据直接流式传输到Java代码或文件系统的选项。有人对如何将此客户端音频流（用getUserMedia打开）传递给服务器端Java有任何建议吗？如果有什么不同，我们将使用spring框架。
谢谢。
编辑：
这是要求的代码：
我将其添加到recorder.js
this.upload = function () {
var data = new FormData();
data.append('file', blob);
$j.ajax({
url : "/Your_Path/To_PHP/action/UploadAudio/",
type: 'POST',
data: data,
contentType: false,
processData: false,
success: function(data) {
alert("Success");
},
error: function() {
alert("uploadFail");
}
});
}
并在php代码上：
if($_GET['action'] == 'UploadAudio') {
if (!file_exists('/audioArchiveDestination/subDirectory/')) {
mkdir('/audioArchiveDestination/subDirectory/', 0777, true);
}
$filePath = "/audioArchiveDestination/subDirectory/";
$filename = $_SESSION['member_id'].'_'.time(); //Can be anything
$fileExtension = "wav";
$uploadSuccess = move_uploaded_file($_FILES['file']['tmp_name'], $filePath.$filename.".wav");
if($uploadSuccess) {
$results = json_encode(array("filename" => $filename));
echo $results;
}
}
您可以尝试在客户端上对数据进行编码，以减少带宽。此外，您可以在收到数据后立即发送数据。我认为MediaRecorder（编码媒体的标准API）目前仅在Firefox中可用，但我敢肯定其他浏览器也会实现它。无论如何，这是怎么回事，您可以将evt.data每次调用的内容发送给Java应用程序以流式传输。
<audio controls></audio>
<button></button>
<script>
var v = document.querySelector("video");
var b = document.querySelector("button");
window.navigator.mozGetUserMedia({audio:true}, function(stream) {
v.mozSrcObject = stream;
v.play();
var mediaRecorder = new MediaRecorder(stream);
var chunks = [];
b.addEventListener("click", function() {
mediaRecorder.stop();
});
mediaRecorder.ondataavailable = function(evt) {
chunks.push(evt.data);
// or send evt.data using an XMLHttpRequest to the server
};
mediaRecorder.onerror = function(evt) {
console.log('onerror fired');
};
mediaRecorder.onstop = function(evt) {
console.log('onstop fired');
// make a blob out of all the chunks
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
// allow the user to download the opus file
window.location.href = URL.createObjectURL(blob);
};
mediaRecorder.onwarning = function(evt) {
console.log('onwarning fired');
};
v.addEventListener("loadedmetadata", function() {
mediaRecorder.start();
v.play();
});
v.addEventListener("ended", function() {
mediaRecorder.stop();
mediaRecorder.requestData();
});
}, function() {
alert("gUM failure")
});
</script>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句