Question

我正在构建一个Web应用程序，您可以在其中记录来自浏览器的音频，然后将其上传到服务器，以便其他用户可以收听它，进行评估，更正-语言学习。

我有部分代码，但我不知道如何将它们组合在一起：

JS（用于录制音频的脚本-工作正常，跳过了要录制的部分并停止了按钮）：

navigator.mediaDevices.getUserMedia({audio:true})
.then(stream => {handlerFunction(stream)})

function handlerFunction(stream) {
    rec = new MediaRecorder(stream);
    rec.ondataavailable = e => {
        audioChunks.push(e.data);
        if(rec.state == "inactive") {

            let blob = new Blob(audioChunks, {type:'audio/mpeg-3'});
            recordedAudio.src = URL.createObjectURL(blob);
            recordedAudio.controls = true;

            var url = recordedAudio.src;
            var link = document.getElementById("download");
            link.href = url;
            link.download = 'audio.wav';
        }
    }
}

用于创建控件的HTML部分：录制，停止然后下载录制的音频：

<button id="record">Record</button>
<button id="stopRecord">Stop</button>
<p> <audio id="recordedAudio"></audio></p>
<div id="recordings"><a id="download"> Download</a></div>

然后，我有一个文件选择器和一个AngularJS指令来上载文件-在调用：doUploadFile（）之后，该文件到达控制器并被上载到服务器。

选择文件可以很好地进行上传，但是我不知道如何将这两个代码组合在一起。

<form>
    <input type="file" file-model="uploadedFile">
    <button type="submit" ng-click="doUploadFile()">Upload</button>
</form>

文件上传指令：

.directive('fileModel', ['$parse', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function() {
                scope.$apply(function() {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

我想在这里实现什么

完成录制后，会弹出一个按钮/链接
此链接与录制的音频文件关联
单击此按钮将调用doUploadFile（）方法

如何修改代码并将这两部分放在一起，以便我们在录制完成后可以直接上传？

我还是AngularJS的新手，很高兴为您提供帮助！

Answer 1

编辑

设法使其起作用：删除了用于文件上传的表格。该指令也不再需要。我将用于录制和上传的代码放在一起。我在控制器内部添加了FormData对象，并附加了Blob。现在工作正常。

var data = new FormData();


$scope.doUploadFile = function() {
    var url = "/uploadfile";

    var config = {
            transformRequest: angular.identity,
            transformResponse: angular.identity,
            headers : { 'Content-Type': undefined }
    }

    $http.post(url, data, config)
    .then(function(response) {
        $scope.uploadResult = response.data;
        data = new FormData();
    });
};

navigator.mediaDevices.getUserMedia({audio:true})
.then(stream => {handlerFunction(stream)})

function handlerFunction(stream) {
    rec = new MediaRecorder(stream);
    rec.ondataavailable = e => {
        audioChunks.push(e.data);
        if(rec.state == "inactive") {

            let blob = new Blob(audioChunks, {type:'audio/mpeg-3'});
            recordedAudio.src = URL.createObjectURL(blob);
            recordedAudio.controls = true;
            recordedAudio.autoplay = false;

            var url = recordedAudio.src;

            data.append('uploadfile', blob, "recording.wav");
        }
    }
}

angularjs捕获音频并上传文件

1 个答案: