본문 바로가기

졸업 프로젝트

파이썬 Flask로 마이크에서 입력받은 음성을 텍스트로 띄우는 웹페이지 만들기

 

 

안녕하세요! 오늘은 파이썬 Flask를 이용하여 마이크에서 입력받은 음성을 텍스트로 띄우는 간단한 웹페이지를 만들어보겠습니다. 파이썬 음성 인식 라이브러리 SpeechRecognition(https://pypi.org/project/SpeechRecognition/)을 이용할 예정이고, 본 포스팅에서 사용한 IDE는 파이참(PyCharm)입니다. 

 


PyAudio 설치

우선 마이크를 사용하기 위해 PyAudio를 설치해야 합니다. 저는 이 과정에서 윈도우 운영체제와 맥 운영체제의 설치 방법이 달라서 매우 헤맸는데요.. 저는 윈도우 운영체제를 사용하고 있어서 윈도우 기준으로 설명하겠습니다! 윈도우는 명령 프롬프트(cmd) 창에 다음과 같이 입력해주면 설치할 수 있지만..

 

pip install pipwin
pipwin install pyaudio

 

저는 다음과 같은 오류가 발생하였습니다 ㅠㅠ

 

 

 

pipwin install pyaudio 설치 시 발생하는 오류

 

그래서 명시되어 있는 파일의 경로에 접근해보았더니 what is the current encoding of the file? 이라는 팝업이 뜹니다! 저는 ansi 라고 입력한 뒤 코드의 주석보다 최상단에

 

#coding=<utf-8>

 

입력 후 다시 pipwin install pyaudio를 입력하면

 

pipwin install pyaudio 오류 해결

정상적으로 설치되는 것을 확인하실 수 있습니다! 

 


다음으로 speech recognition 모듈을 import해보겠습니다.

 

import speech_recognition as sr

 

이 때 speech_recognition에 빨간 줄이 뜬다면 아직 해당 모듈을 설치하지 않은 것이므로, cmd 창에 

 

pip3 install --upgrade speechrecognition

 

을 입력하면 됩니다.

 

마이크에서 오디오 얻기

그러면 이제 다음과 같은 코드를 입력하여 speech recognition 모듈을 이용하여 마이크에서 오디오를 얻을 수 있습니다. 

 

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

 

음성 인식하기

Sphinx, Google Speech Recognition, Google Cloud Speech, Microsoft Bing Voice Recognition 등 Speech를 Text로 바꿔주는 다양한 도구들이 있습니다. 저는 그 중 Google Speech Recognition을 이용해 음성 인식을 진행하겠습니다.

 

    try:
        transcript=r.recognize_google(audio, language="ko-KR")
        print("Google Speech Recognition thinks you said "+transcript)
    except sr.UnknownValueError:
        print("Google Speech Recognition could not understand audio")
    except sr.RequestError as e:
        print("Could not request results from Google Speech Recognition service; {0}".format(e))

 

정상적으로 음성을 인식했을 경우 인식한 내용을 text로 바꿔서 출력합니다. 저는 한국어를 말할 것이기 때문에 language="ko-KR"로 설정하였습니다. (물론 영어 등 Google Speech Recognition이 지원하는 다른 언어로도 얼마든지 변경할 수 있습니다.) try, except를 이용하여 예외 처리도 해줍니다. 

 

그리고 갑자기 transcript라는 변수가 등장했는데, flask를 사용할 것이기 때문에 audio를 text로 변환한 내용을 transcript에 담고, 나중에 html 파일에 전달해주기 위해 해당 코드 밖에서 미리 선언해준 변수입니다. 

 

이렇게 음성 인식 단계는 끝났습니다! 이제 간단한 flask 웹 어플리케이션을 빌드하여 지금까지 작성한 코드와 합쳐 음성을 텍스트로 띄워보겠습니다.


Flask 웹 어플리케이션 빌드하기

from flask import Flask, render_template, request, redirect

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():

if __name__ == "__main__":
    app.run(debug=True, threaded=True)

 

이것이 flask 웹 어플리케이션의 간단한 기본 구조입니다. 나중에 코드 실행 시 파이참 콘솔 창에 다음과 같은 주소가 나오는데,

 

flask 웹 어플리케이션 실행 결과

@app.route("/")이므로 index 함수 안에 있는 내용이 위의 주소 상에서 실행되게 됩니다. 따라서 입력받은 음성을 텍스트로 띄우기 위해서는 index 함수 안에 방금 했던 마이크에서 오디오 얻기, 음성 인식하기에 해당되는 코드를 작성하면 되겠죠? return 값으로는

 

return render_template('index.html', transcript=transcript)

 

이렇게 해서 html 파일에 transcript를 전달해줍니다.


주소가 연결될 때 띄울 웹 페이지를 html, css를 이용해 간단하게 꾸며줍니다. 물론 얼마든지 제가 꾸민 방식과 다르게 하셔도 됩니다! 

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Speech Recognition in Python</title>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles/index.css') }}" />
</head>
<body>
<div id="speechContainer">
    <h1>Say something!</h1>
    <form method="post" enctype="multipart/form-data">
        <br>
    </form>

    {% if transcript != "" %}
        <div id="speechTranscriptContainer">
            <h1>Transcript</h1>
            <p id="speechText">{{ transcript }}</p>
        </div>
    {% endif %}
</div>
</body>
</html>

 

index.css

h1, p, input {
    font-family: 'Lato', sans-serif;
}

#speechContainer {
    margin: 20px;
}

#speechTranscriptContainer {
    margin-top: 20px;
}

#speechText {
    font-size: 18px;
    width: 500px;
}

 

 

 

최종 화면
파이참 콘솔 창

최종 완성된 화면입니다! 파이참 콘솔 창에 나오는 주소로 들어간 뒤 한국어로 말하면 그 내용을 인식해 웹페이지에 띄워주는 모습입니다. 저는 "안녕하세요 만나서 반갑습니다"라고 말해봤어요! 잘 되는지 직접 확인해 보세요~ 

 

flask의 @app.route()로 다른 주소에 접근하게 하면 방금 실습해본 서버가 아닌 다른 서버로도 접근하게 만들 수 있습니다. 또한, 지금 transcript 변수에는 audio를 text로 번역한 내용이 담겨 있는데, 이를 전달해서 단순히 웹페이지에 띄우는 것 말고도 챗봇의 input으로 넣어주는 등 다양한 응용을 할 수 있겠죠? 이상으로 오늘의 실습을 마치겠습니다!