Question

我拼凑了一个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>

Answer 1

出于安全考虑，大多数浏览器都不允许预先填写html上传元素。 ogg文件是否存储在本地（在客户端上）。如果它存储在Web服务器上，则可以选择将（公共可用的）URL发布到php脚本并使用file_get_contents将其打开。

使用PHP将通过getUserMedia（）和Javascript获得的音频文件上载到服务器

1 个答案: