angularjs捕获音频并上传文件

Posted 2023-03-07

【中文标题】angularjs捕获音频并上传文件

【英文标题】：angularjs capture audio and upload file

【发布时间】：2018-09-21 15:30:08

【问题描述】：

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

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

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 的新手，很高兴得到您的帮助！

【问题讨论】：

找到这个帖子，试试修改：***.com/questions/13333378/…

【参考方案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");