Question

我发现其他帖子与此类似，但没有任何作用 - 而且它们已经相当陈旧，所以不想添加它们。

我正在使用MP3LameEncorder.js＆lt;音频＆gt;允许用户从麦克风录制音频。

目前我得到的是这样的： <audio id="audio" controls="" type="audio/mpeg" src="blob:https://example.com/6c2730f1-6a77-41e5-b6c7-ec9fdd25d54a"></audio>

这是多步骤过程的一部分，尚未保存任何文件。我想要做的是将src中的blob url转换为base64并将其放入隐藏的表单元素中。然后，当用户完成所有内容填充后，将base64数据发送到我的php文件，然后将其转换为服务器上的mp3或wave文件，我可以将其用于其他内容。

每当我尝试将网址转换为base64时，我得到：未捕获的TypeError：无法执行＆＃39; readAsDataURL＆＃39; on＆＃39; FileReader＆＃39;：参数1的类型不是＆＃39; Blob＆＃39;

这是我正在做的事情：

audioElement.src = URL.createObjectURL(encoder.finish());    
let reader = new window.FileReader(); 
reader.readAsDataURL(audioElement.src); 
reader.addEventListener("loadend", function() {
    var audioBase64 = reader.result.toString();
    let audioTurned = audioBase64.substr(audioBase64.indexOf(',')+1); 
    $("#audiofile").val(audioTurned); 
});

我可以在提交表单之前创建和存储文件，但是我看到的方法会将用户跳转到一个新的处理php页面，该页面会搞砸所有内容并删除他们已经完成的操作在形式。

更新1 - 作为Base64（Works）：

好吧我想我得到了它，看了@Dhavel提到的演示，我修改了我的代码，它似乎正在工作。在我的StopRecording函数中，它具有我的原始代码，而不是将完成的编码分配给我的音频元素，然后尝试使用它在那里创建的url，如果我首先将编码器作为blob直接发送，它似乎有效。

stopBtnRecord = () => {
    isRecording = false;
    startBtn.removeAttribute('disabled');
    stopBtn.setAttribute('disabled', true);
    audioContext.close();
    processor.disconnect();
    tracks.forEach(track => track.stop());
    saveRecording(encoder.finish());
};
function saveRecording(blob) {
    var time = new Date(),
    url = URL.createObjectURL(blob);
    $("#audio").attr('src', url);
    let reader = new window.FileReader(); 
        reader.readAsDataURL(blob); 
        reader.addEventListener("loadend", function() {
        var audioBase64 = reader.result.toString();
        let audioTurned = audioBase64.substr(audioBase64.indexOf(',')+1); 
        $("#audiofile").val(audioTurned); 
    });
}

这会在我的隐藏表单元素中创建一个大的base64输出，当我在提交时发送到我的php文件时，将其保存为文件。

更新2 - 直接Blob：

我尝试直接发送blob，通过将新的onclick功能附加到我的表单提交按钮来设法做到这一点。但$ _FILES和$ _POST仍然无法在任何地方显示。

var submitFormBtn = document.querySelector('#share-submit');
submitFormBtn.onclick = uploadBlob();
function uploadBlob(){
    var url = $("#audio").attr('src');
    var blob = new Blob([url]);
    var fd = new FormData();
    fd.append('fname', 'test.wav');
    fd.append('data', blob);
    $.ajax({
        type: 'POST',
        url: '/app/inc/social_push.php',
        data: fd,
        processData: false,
        contentType: false
    }).done(function(data) {
        console.log(data);
    });
}

这是我得到的控制台日志。看起来它作为tmp文件存放在存储中，但它在POST / FILES数据中不可用，供我使用。在我的PHP文件中，我应该在其他地方查找待处理的blob文件吗？

</pre><pre>array(1) {
    ["data"]=>
        array(5) {
            ["name"]=>
            string(4) "blob"
            ["type"]=>
            string(24) "application/octet-stream"
            ["tmp_name"]=>
            string(25) "/home/share/tmp/phpcs49Me"
            ["error"]=>
            int(0)
            ["size"]=>
            int(0)
        }
    }
</pre>

将Blob URL转换为Base64（或直接）并发送到服务器

0 个答案: