Question

我最近开始使用HTML5和getUserMedia界面录制音频。我已经找到了一些如何做到这一点的例子，一个例子最终提供了一个＆＃34;下载＆＃34;记录的音频的链接基本上是由

产生的

<a href="data:audio/mp3;XVVEEDAD…"

所以它只是将实际音频数据嵌入到数据链接中。

现在，我想知道我是否可以利用它并产生类似

的东西

<form action="…">
  <input type="hidden" name="audio" value="data:audio/mp3;…">
</form>

浏览器是否能够处理此问题？

我目前正致力于一个人们应该在面试中回答问题的应用程序。他们在页面上被问到几个问题，并且应该能够以音频版本回答它们。这意味着一页上有几个问题，因此有几个记录器。我想一次提交整个数据。

但我担心的是，所有这一切都不可能。其次，如果这会是一次太多的数据？我希望尽可能避免使用Flash路由或以异步方式发送音频数据。

更新

感谢Ivan的回答，我最终重写了所提供文章的代码，这些代码导致了我自己的小工具：https://github.com/icatcher-at/MP3RecorderJS

Answer 1

我猜你的意思是this article。没有什么能阻止你尝试这种方法。而不是

var url = 'data:audio/mp3;base64,'+encode64(e.data.buf);

在最后一个代码片段中，您可以直接使用base64编码值：

$('<input>').attr('type','hidden').attr('name','audio').appendTo('form').val(encode64(e.data.buf));

然后在服务器端将base64字符串解码为字节。最好的方法是，您可以非常快速地开始使用这种方法，并测试它是否符合您的要求。

Answer 2

是的，绝对！

首先，您需要将dataURI转换为blob对象的函数。

var dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)]);
};

然后，您需要一个FormData。

var fd = new FormData();
fd.append('filename_you_want_to_post', dataURItoBlob($('a').attr('href')));

最后，使用jQuery Aajx发送它：

$.ajax({
  url: "/where/you/post/to",
  type: "POST",
  data: fd,
  processData: false,
  contentType: false
});

祝你好运。

HTML5录制语音音频并通过表单发送

2 个答案: