如何在我的 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 应用程序分开，因为这样您就可以再次使用它。 但是，如果您将其与应用程序的视图函数等集成，您可以对其进行更多自定义。 此外，您可能应该将所有 search.py 逻辑放在一个 function 或 class 中，以便您可以调用它。 否则，如果您按原样导入它，它将立即运行。

无论哪种方式，您都需要一个看起来像这样的语音结构：

1. 用户提交一些语音，可以是现场的、录制的或作为文件的。 我们将此语音文件speech.wav （或任何其他文件类型，由您选择）
2. speech.wav由您的语音识别工具读取和解析。 它可能会返回一个单词列表，或者可能只是一个字符串。 我们称之为output 。
3. 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 请求可能是一个很酷的主意，它将返回句子。 但这是真正棘手的地方，因为您需要将信息提供给 arguments 中的 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>

对那里的任何括号错误表示歉意。 So that should send a GET request for some JSON to the URL of "/audio_process", which will return what we saw earlier, and then it will output the "text" of the JSON to the "#output" HTML selector.

可能需要进行一些调试，但这似乎可以解决问题。