首页 > 解决方案 > 使用 ffmpeg 将音频 blob 作为 mp3 文件保存到后端或 Azure

问题描述

我有一个 asp.net 网络表单,我正在使用 javascript 和 navigator.mediaDevices.getUserMedia 来录制音频消息。此消息必须在记录后加载到 Azure 中。

到目前为止,我有: 2 个按钮,开始和停止录制音频 blob

在该过程结束时,我正在尝试使用 ffmpeg 将 blob 记录到我的应用程序的文件夹中,然后我可以将文件加载到 Azure 中(我已经为这个准备好了代码)。或者理想情况下,直接保存到 Azure。

我已经使用 nuget 包在我的应用程序中安装了 ffmpeg(我尝试了 Xabe ffmpeg 下载器和 Accord 视频 ffmpeg),但是当我运行函数 SendData() 时无法识别 ffmpeg 并且我收到此错误:未捕获的错误:模块名称“ffmpeg”有尚未加载上下文:_。使用要求([])

我的问题是:

谢谢您的帮助

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

        record.onclick = e => {
            record.disabled = true;
            stopRecord.disabled = false;
            audioChunks = [];
            rec.start();
        }

        stopRecord.onclick = e => {
            record.disabled = false;
            stop.disabled = true;
            rec.stop();
        }


        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;
                    sendData(blob)
                }
            }
        }

        function sendData(data) {
            var ffmepg = require("ffmpeg");
            try {
                var Path = data;
                var process = new ffmepg("Path");
                process.then(function (audio) {audio.fnExtractSoundToMP3("~//AppData//Audio//test.mp3", function (error, file) {
                        if (!error)
                            console.log("Audio file: " + file);
                    });
                }, function (err) {
                    console.log("Error: " + err);
                });
            }
            catch (e) {
                console.log("Catch e.code" + e.code);
                console.log("Catch e.msg" + e.msg);
            }
        }
    </script>

    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Audio record</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="../../Scripts/require.js"></script>
</head >
<body>

    <h5>Record</h5>
    <p>
        <button id=record>Start</button>
        <button id=stopRecord disabled>Stop</button>
    </p>
    <p>
        <audio id=recordedAudio></audio>
    </p>
</body>
</html >

标签: asp.netazureffmpegwebformsmediadevices

解决方案


推荐阅读