gpt4 book ai didi

javascript - 使用 PHP 将通过 getUserMedia() 和 Javascript 获取的音频文件上传到服务器

转载 作者:行者123 更新时间:2023-11-30 06:27:47 25 4
gpt4 key购买 nike

我已经拼凑了一个 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 文件是否存储在本地(在客户端)。如果它存储在网络服务器上,一个选项可能是将(公共(public)可用的)url 发布到 php 脚本并使用 file_get_contents 打开它。

关于javascript - 使用 PHP 将通过 getUserMedia() 和 Javascript 获取的音频文件上传到服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20019937/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com