python - 如何在我的 flask 应用程序中连接浏览器的麦克风？

Question

我正在使用 speech_recognition 模块通过语音识别搜索查询，然后打开一个显示查询结果的谷歌浏览器页面。基本上，它是谷歌语音搜索的替代品，但它是通过终端启动的。但我想把它变成一个网络应用程序。我创建了 flask 应用程序:
-搜索(目录)

-search.py (opens a tab using terminal directly/works independently)

-app.py (main flask app)

-static(directory)

-templates (directory)

但由于该应用程序托管在服务器上，我的 search.py​​ 从服务器麦克风获取输入(在这种情况下，它是我 PC 的麦克风/但在 AWS 上，它不起作用)。如何从客户端浏览器获取输入并在 Speech.py​​ 中使用？我应该删除这个文件并直接在我的主应用程序中使用它吗？执行此功能的最有效方法是什么？
如果有人想知道，这是我的 search.py​​ 脚本:
它通过终端工作。

import subprocess

import speech_recognition as sr

browser_exe_path = "..."

r=sr.Recognizer()
with sr.Microphone() as source:
    print("Listening!")
    audio=r.listen(source)

    try:
        s_name=r.recognize_google(audio)
        """
        Code to open browser and search the query
        """
    except:
        print("Error!")

Answer 1

这两个可能是最好的方法:

制作您自己的语音识别工具的模块/包并将其导入您的 flask 应用程序

将功能本身集成到应用程序中。

如果您打算再次使用它，最好将语音识别与 Web 应用程序分开，因为这样您就可以再次使用它。但是，如果您将其与应用程序的 View 函数等集成，您可以对其进行更多自定义。此外，您可能应该将所有 search.py​​ 逻辑放在一个函数或类中，以便您可以调用它。否则，如果您按原样导入它，它将立即运行。
无论哪种方式，您都需要一个看起来像这样的语音结构:

用户提交一些语音，可以是现场的、录制的或作为文件的。我们将此语音文件称为 speech.wav (或任何其他文件类型，您的选择)

speech.wav由您的语音识别工具读取和解析。它可能会返回一个单词列表，或者可能只是一个字符串。我们称之为output .

output返回到网页并呈现为供用户阅读的内容。

我建议从表单提交开始，如果你可以让它工作，你可以尝试使用 AJAX 进行实时语音识别。从基本开始，只要求用户添加一个音频文件或录制一个。如果在桌面上，以下脚本将打开文件浏览器，如果在 iOS 或 Android 上，则让用户记录。

  <input name="audio-recording" type="file" accept="audio/*" id="audio-recording" capture>
  <label for="audio-recording">Add Audio</label>

  <p id="output"></p>

因此，一旦他们在那里获得了文件，您就需要访问它。您可能想要自定义它，但这里有一个基本脚本，它将控制上述音频。这个脚本的功劳归于谷歌开发者。

<script>
  const recorder = document.getElementById('audio-recording');

  recorder.addEventListener('change', function(e) {
    const file = e.target.files[0];
    const url = URL.createObjectURL(file);
    // Do something with the audio file.
    
  });
</script>

上面写着// Do something with the audio file ，发出 AJAX GET 请求可能是一个很酷的主意，它将返回句子。但这是真正棘手的地方，因为您需要在参数中将信息提供给 flask ，而不是音频文件。但是因为我们已经将文件所在的位置存储在常量 url 中。在我们的脚本中，我们可以使用它作为参数，例如:

from flask import request, jsonify
import search # this is your own search.py that you mentioned in your question.

@app.route("/process_audio")
def process_audio():
    url = request.args.get("url")
    text = search.a_function(url) #returns the text from the audio, which you've done, so I've omitted code
    if text != None
        return jsonify(result="success",text=text)
    else:
        return jsonify(result="fail")

这将以 JSON 格式返回数据，就像客户端 js 和服务器端 python 之间的桥梁。它可能看起来像这样:

{
 "result":"success",
 "text":"This is a test voice recording"
}

然后，您需要有一些 jQuery(或任何其他 js 库，但 jQuery 又好又容易)来管理 AJAX 调用:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type=text/javascript>
        const recorder = document.getElementById('audio-recording');

  recorder.addEventListener('change', function(e) {
    const file = e.target.files[0];
    const url = URL.createObjectURL(file);
    $.getJSON('/process_audio', {
          url: url 
        }, function(data) {
          $("#output").text(data.text);
            });
            return false;
          
    </script>

对那里的任何括号错误表示歉意。因此，它应该向“/audio_process”的 URL 发送一些 JSON 的 GET 请求，这将返回我们之前看到的内容，然后它将输出 "text"将 JSON 转换为 "#output" HTML 选择器。
可能需要进行一些调试，但这似乎可以解决问题。