如何实现实时语音输入?/ How to Implement Real-Time Voice Input

[ChemInCode]

您好，wang0618,
非常抱歉再次打扰您。我想利用pywebio应用程序实现一种类似于必应搜索中语音搜索的功能。但是在文档中，我没有找到调用用户的麦克风实现录音上传的组件。我也咨询了您的新作品——PyWebIO QA Bot, 它也无能为力。请问有任何办法可以调用用户的麦克风，让用户在网页界面中输入语音上传吗？（不是在本地录音机录音完毕后上传录音文件）

---

Hello wang0618,

I apologize for disturbing you again. I am interested in using the PyWebIO application to implement a feature similar to the voice search in Bing search. However, I couldn't find a component in the documentation that allows me to access the user's microphone for recording and uploading. I also inquired about your new creation, the PyWebIO QA Bot, but it seems unable to fulfill this requirement. Is there any way to invoke the user's microphone and enable them to input voice for uploading within a web interface? (not by recording a file locally and then uploading it)

Your guidance would be greatly appreciated.

[wang0618]

You need to write some js to achieve this, here is an example:

import base64

from pywebio.output import *
from pywebio.session import eval_js
from pywebio_battery import put_audio

# https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
voice_recording_js = """
new Promise((resolve, reject) => {
    recording_duration_seconds = 3;
    if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)){
        resolve(null)
        console.error("getUserMedia not supported");
        return;            
    }
    
    navigator.mediaDevices
        .getUserMedia(
            {
                audio: true,
            },
        )
        .then((stream) => {
            const mediaRecorder = new MediaRecorder(stream);
            let chunks = [];
            mediaRecorder.ondataavailable = (e) => {
                chunks.push(e.data);
            };
            mediaRecorder.onstop = (e) => {
                const blob = new Blob(chunks, {type: "audio/ogg; codecs=opus"});
                chunks = [];
                const fileReader = new FileReader();
                fileReader.readAsDataURL(blob);
                fileReader.onloadend = function () {
                    resolve(fileReader.result)
                }
            };
            mediaRecorder.start();
            setTimeout(function () {
                mediaRecorder.stop();
            }, recording_duration_seconds * 1000);
        })
        // Error callback
        .catch((err) => {
            console.error(`The following getUserMedia error occurred: ${err}`);
        });
})
"""


def record():
    toast('Recording...')
    audio = eval_js(voice_recording_js)
    if not audio:
        toast("No audio recorded", color='error')
    else:
        data = audio.split('base64,', 1)[-1]
        # with open('record.ogg', 'wb') as f:
        #     f.write(base64.b64decode(data))
        # toast('Saved as record.ogg')
        put_audio(base64.b64decode(data))


def main():
    put_button("Voice Recording", onclick=record)


if __name__ == '__main__':
    from pywebio import start_server

    start_server(main, port=8082, cdn=False)

[ChemInCode]

非常感谢您的回复，您的答案十分有帮助！通过这种方法，我现在可以让用户使用语音和PyWebIO 应用程序交互，而不仅仅使用鼠标和键盘了！再次感谢您耐心的帮助。

---

Thank you very much for your response. Your answer has been extremely helpful! With this approach, I can now enable users to interact with the PyWebIO application using voice, in addition to just using the mouse and keyboard. Once again, I truly appreciate your patient assistance.