Angularjs захватить аудио и загрузить файл

Question

Я создаю веб-приложение, в котором вы можете записать аудио из браузера, а затем загрузить его на сервер, чтобы другие пользователи могли его прослушать, дать вам оценку, исправления - изучение языка.

У меня есть части кода, но я не могу понять, как их объединить:

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 () файл попадает на контроллер и загружается на сервер.

Загрузка отлично работает с выбором файла, но я не знаю, как объединить 2 фрагмента кода вместе.

<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]);
                });
            });
        }
    };
}]);

Чего я хочу достичь здесь:

1. После окончания записи всплывающая кнопка / ссылка всплывает

2. Эта ссылка связана с записанным аудиофайлом

3. При нажатии этой кнопки вызывается метод doUploadFile ()

Как изменить код исоединить 2 части, чтобы мы могли загрузить их сразу после окончания записи?

Я все еще новичок в AngularJS, буду очень рад вашей помощи!

Answer 1

РЕДАКТИРОВАТЬ

Удалось заставить его работать: Стерли форму для загрузки файла.Директива также больше не нужна.Я положил код для записи и загрузки вместе.Я добавил объект FormData внутри контроллера и добавил блоб.Работает нормально сейчас.

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");
        }
    }
}