[WebGL] Google STT(Speech-to-Text) Unity WebGL에 적용하기

Google STT(음성 인식 기술)를 Unity WebGL 프로젝트에 적용하는 방법에 대해 알아보겠습니다.

1. STT란 무엇인가?

STT는 음성을 텍스트로 변환해주는 기술입니다. 즉, 사용자가 말한 내용을 컴퓨터가 이해할 수 있는 형태로 바꿔주는 것!! 이 기술은 자연어 처리(NLP)와 결합되어 다양한 애플리케이션에서 사용됩니다. 예를 들어, 음성 비서, 챗봇, 그리고 게임 내 음성 명령 등에서 활용되고 있습니다.

 

2. STT의 알고리즘

STT의 알고리즘은 크게 두 가지 단계로 나눌 수 있습니다: 신호 처리와 언어 모델링입니다.

• 신호 처리 : 사용자의 음성을 디지털 신호로 변환하고, 노이즈 제거 및 특징 추출을 통해 중요한 정보를 추출합니다.
• 언어 모델링 : 추출된 특징을 기반으로 단어를 예측하고 조합하여 최종적으로 텍스트로 변환합니다.

이 과정에서 머신러닝과 딥러닝 기법이 많이 사용되며, 대량의 데이터 학습을 통해 정확도를 높이고 있습니다.

 

3. Google STT를 Unity WebGL에 적용하는 방법

Google STT를 Unity WebGL 프로젝트에 적용하기 위해서는 몇 가지 단계를 거쳐야 합니다!

Step 1: Google Cloud Speech-to-Text API 설정

먼저 Google Cloud Console에서 Speech-to-Text API를 활성화해야 합니다. 이 과정에서는 API 키를 생성하고 필요한 권한을 설정해야 합니다.

 

(1) Google Cloud 콘솔에 들어가 API 및 서비스를 클릭! 

 

(2) API 서비스를 들어오면 우측 라이브러리 클릭! 

(3) 라이브러리 창에 Speech-to-Text 입력 후 검색

 

(4) STT 라이브러리에 들어가 활성화 버튼을 누른다!

 

 

Step 2: Unity 프로젝트 설정

Unity 에디터에서 새로운 프로젝트를 생성한 후, jslib 파일을 추가합니다. 이 파일에는 Google STT API와 통신하기 위한 JavaScript 코드가 포함되어야 합니다.

(통신할 수 있는 많은 방법들이 있지만 Unity와 JavaScript 간에 데이터를 쉽게 전달할 수 있어 jslib 활용하는 것을 선택)

 

** Unity jslib이란?

Unity jslib는 JavaScript 라이브러리를 Unity 프로젝트에 통합할 수 있게 해주는 기능!!

이를 통해 웹 기반의 기능이나 API를 쉽게 사용할 수 있습니다. 특히 WebGL 빌드를 할 때 유용하게 쓰이고, JavaScript와 C# 간의 상호작용을 가능하게 합니다.

 

(1) Unity 프로젝트 내 Plugins 폴더 생성 -> jslib 파일 생성

 

(2) jslib 코드 작성 

mergeInto(LibraryManager.library, {
    Recording: function() {
    navigator.mediaDevices.getUserMedia({ audio: true })
        ...
            ...
         	// ArrayBuffer를 Base64로 변환하는 함수
            function arrayBufferToBase64(buffer) {
                let binary = '';
                const bytes = new Uint8Array(buffer);
                const len = bytes.byteLength;
                for (let i = 0; i < len; i++) {
                    binary += String.fromCharCode(bytes[i]);
                }
                return btoa(binary);
            };
			...

           mediaRecorder.onstop = function() {
                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });

				 // WAV 파일을 ArrayBuffer로 읽기
                const reader = new FileReader();
                reader.readAsArrayBuffer(audioBlob);
                reader.onloadend = function() {
                    // ArrayBuffer를 Uint8Array로 변환 (WAV 파일 전체)
                    const wavData = new Uint8Array(reader.result);
                    //Base64로 변환
                    const base64Wav = arrayBufferToBase64(wavData.buffer);
                    //Unity로 데이터 전송
                    SendMessage('GameManager', 'ReceiveAudio', base64Wav);
				...
},
...

});

 

* 코드는 대략적으로 설명하자면 

WebGL에서 실행된 음성 데이터 Type은 보통 WAV 형식! 

WAV는 비압축된 PCM 데이터로 저장되어 WebGL 환경에서 처리하기도 비교적 쉽습니다!

 

WAV 파일을 ArrayBuffer로 읽기 -> ArrayBuffer를 Uint8Array로 변환 -> Uint8Array을 Base64로 인코딩 -> Unity로 전송!

주의할점!!

WAV 파일을 인코딩할 때 헤더를 포함하여 전달해야 한다

 

(3) Unity 코드 작성 

public class GameManager : MonoBehaviour
{
	...
#if UNITY_WEBGL && !UNITY_EDITOR
    [DllImport("__Internal")]
    private static extern void Recording();
	...
#endif

//javascript에서 호출된 메서드! 
public void ReceiveAudio(string base64Audio)
    {
        var request = new
        {
            config = new
            {
                languageCode = "ko-KR",
                useEnhanced = true,
            },
            audio = new
            {
                content = base64Audio
            }
        };
        string requestJson = JsonConvert.SerializeObject(request);
        ...
    }

 

** var request 의 config부분을 보면 필수적으로 입력해야 하는 encoding, sampleRateHertz 가 없는 것을 알 수 있다

이는 WAV파일은 선택사항이기 때문에 사용하지 않았다!

 

이 requestJson을 

private const string URL = "https://speech.googleapis.com/v1/speech:recognize?key=';

에 API Key를 붙여 Post 형식으로 전달하면 내가 말한 음성이 텍스트로 출력이 된다!