如何将音频 blob 从 javascript 发送到 python？

Posted 2023-02-25

【中文标题】如何将音频 blob 从 javascript 发送到 python？

【英文标题】：How to send audio blob from javascript to python?

【发布时间】：2016-04-04 12:29:44

【问题描述】：

我想将音频 blob 从 JS 发送到 python 脚本（在服务器上运行）。 我的 JS ajax .. 看起来像这样。

var fileType = 'audio';
var fileName = 'output.wav';
var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);
    $.ajax(
    type: 'POST',
    url: 'http://localhost/python/audio.py',
    data: audio:formData,
        success: function(response) 
        alert(respose);
    
   ); 

我的 python 脚本看起来像这样。

#!/usr/bin/python3
print("Content-Type: text/html")
print()
import ssl
import cgi
import wave
import contextlib
form = cgi.FieldStorage()
fname = form.getvalue("audio", "error")
with contextlib.closing(wave.open(fname,'r')) as f:
    frames = f.getnframes()
    rate = f.getframerate()
    duration = frames / float(rate)
    print(duration)

现在，我只是在测试，所以它应该让我知道音频文件的持续时间。 blob是通过record.js生成的

这不起作用，因为 python 无法识别文件。有什么解决办法吗？

PS：我使用 Xampp Server，在本地主机上运行。

回应 Wojtek Marczenko：错误是

[Mon Apr 04 18:26:09.537912 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215: Traceback (most recent call last):: /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.537978 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215:   File "/home/shashank/project/dutchman/python/audio.py", line 10, in <module>: /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.538002 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215:     with contextlib.closing(wave.open(fname,'r')) as f:: /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.538024 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215:   File "/usr/lib/python3.5/wave.py", line 499, in open: /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.538036 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215:     return Wave_read(f): /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.538056 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215:   File "/usr/lib/python3.5/wave.py", line 163, in __init__: /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.538065 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215:     self.initfp(f): /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.538086 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215:   File "/usr/lib/python3.5/wave.py", line 128, in initfp: /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.538097 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215:     self._file = Chunk(file, bigendian = 0): /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.538110 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215:   File "/usr/lib/python3.5/chunk.py", line 61, in __init__: /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.538119 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215:     self.chunkname = file.read(4): /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html
[Mon Apr 04 18:26:09.538132 2016] [cgi:error] [pid 5330] [client ::1:60802] AH01215: AttributeError: 'NoneType' object has no attribute 'read': /home/shashank/project/dutchman/python/audio.py, referer: http://localhost/index.html

【问题讨论】：

什么时候“不工作”？ python是否接收到音频表单数据？您在尝试 alert() 时还输入了错误的 response

好的，好像有问题，ajax 导致“jquery.min.js:2846 Uncaught TypeError: Illegal invocation”。好像我注释掉ajax，错误似乎消失了。

我倾向于使用 google chrome 的开发者工具来查看实际从您的 ajax/javascript 表单发送的数据。

现在的问题似乎在于从 python 访问数据，而不是从 JS 访问数据，但我不是专家。如何使用开发人员工具查看正在发送的数据？从来没有见过这样的东西。 @丹尼卡伦

【参考方案1】：

您似乎没有正确地将 blob 作为表单字段发送。将 blob 附加到 FormData 的正确方法是 formData.append(fileType, blob, fileName);。此外，您应该只附加 formData 而不是将其嵌套在另一个对象中：

var formData = new FormData();
formData.append(fileType, blob, fileName);
$.ajax(
    type: 'POST',
    url: 'http://localhost/python/audio.py',
    data: formData,
    processData: false,  // prevent jQuery from converting the data
    contentType: false,  // prevent jQuery from overriding content type
    success: function(response) 
        alert(response);
    
);

来源： https://developer.mozilla.org/en-US/docs/Web/API/FormData/append http://www.mattlunn.me.uk/blog/2012/05/sending-formdata-with-jquery-ajax/

在python方面，您需要根据python docs使用CGI模块（不能发布更多链接）。我相信正确的方法是这样的：

form = cgi.FieldStorage()
fname = form["audio"].filename
print "Got filename:", fname  # in case of problems see if this looks ok

with contextlib.closing(wave.open(fname,'r')) as f:
    ...

【讨论】：

如何在 python 中恢复这个文件？似乎还是有些问题。我正在添加有问题的错误，因为 cmets 似乎有字符限制

更新了答案，如果您搜索“文件名”，您还可以在文档 (docs.python.org/2/library/cgi.html) 中查看示例