실시간 음성을 텍스트로 변환하기
1. 소개
이 문서는 Daglo API를 사용하여 웹 브라우저에서 실시간 음성을 텍스트로 변환하는 방법을 안내합니다. JavaScript 환경에서 Daglo API 라이브러리를 활용하여 음성 인식을 구현하는 방법을 설명합니다.
WARNING
⚠️ 주의 사항
- 웹 브라우저에서 동작하는 JavaScript 환경에서만 사용할 수 있습니다.
- 실시간 음성 인식은 현재 ‘한국어’만 지원합니다.
- 노래 음원 혹은 배경음악이 크게 들리는 오디오는 텍스트 변환을 지원하지 않습니다.
1) 주요 기능
- 실시간 음성 인식: 마이크 입력(오디오 스트림)을 실시간으로 텍스트로 변환
- 정확도 높은 텍스트 변환: 최신 음성 인식 기술을 적용하여 높은 정확도로 텍스트 변환
- 빠른 응답 속도: 실시간으로 음성을 처리하여 즉각적인 텍스트 출력
- 웹 브라우저 지원: 별도의 설치 없이 웹 브라우저에서 즉시 사용 가능
2. 사전 준비
1) 필수 요구 사항
- 최신 버전의 웹 브라우저 (Chrome, Edge, Firefox 등)
- 마이크 접근 권한
- Daglo API 계정 및 API 토큰
- Daglo API GitHub 저장소
3. 구현 예제 코드
아래는 Daglo API를 활용한 실시간 음성 인식 구현 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dagloAPI stream STT Example</title>
<link href="./index.css" rel="stylesheet">
</head>
<body>
<div id="liveView" class="videoView">
<label>API Token</label>
<input id="token" placeholder="YOUR TOKEN">
<br>
<button id="enableButton" class="enable-btn">
<span class="enable-btn-label">Microphone ON</span>
</button>
<p id="result"></p>
<div id="transcripts"></div>
<div id="speech-list"></div>
</div>
<script type="module">
import { DagloAPI } from 'https://actionpower.github.io/dagloapi-js-beta/lib/daglo-api.module.js';
document.getElementById('enableButton').addEventListener('click', async (event) => {
const dagloToken = document?.getElementById('token').value?.trim();
let client = new DagloAPI({
apiToken: dagloToken
});
let transcriber = client.stream.transcriber();
transcriber.on('transcript', (data) => {
console.log('[#] onTranscript', data);
if (data?.text) {
const span = document.createElement('span');
span.textContent = data?.text;
document.getElementById('transcripts').append(span);
}
})
let stream;
try {
// capture the microphone
stream = await navigator.mediaDevices.getUserMedia({ audio: true });
}
catch (err) {
console.log("The following error occured: " + err);
return alert("getUserMedia not supported on your browser");
}
if (stream) {
transcriber.connect(stream);
}
});
</script>
</body>
</html>4. Daglo API 라이브러리 설명
예제 코드의 주요 부분을 분석하여 Daglo API 라이브러리의 사용법을 설명합니다.
1) 라이브러리 로드
import { DagloAPI } from 'https://actionpower.github.io/dagloapi-js-beta/lib/daglo-api.module.js';Daglo API 라이브러리를 불러옵니다.
2) DagloAPI 인스턴스 생성
let client = new DagloAPI({
apiToken: 'YOUR_API_TOKEN', // 필수: API 토큰
});사용자가 입력한 API 토큰으로 DagloAPI 인스턴스를 초기화합니다. 이 인스턴스를 통해 API의 다양한 기능에 접근할 수 있습니다.
3) 음성 변환기(Transcriber) 생성
let transcriber = client.stream.transcriber();client.stream 객체를 통해 음성 스트림 처리를 위한 변환기(Transcriber)를 생성합니다.
4) 텍스트 변환 이벤트 리스너 등록
transcriber.on('transcript', (data) => {
console.log('[#] onTranscript', data);
if (data?.text) {
const span = document.createElement('span');
span.textContent = data?.text;
document.getElementById('transcripts').append(span);
}
})transcript 이벤트가 발생할 때 호출되는 콜백 함수를 등록합니다. 이 이벤트는 음성이 텍스트로 변환될 때마다 발생합니다.
콜백 함수는 변환된 텍스트 정보가 포함된 data 객체를 받습니다. 코드에서는 콘솔에 로깅한 후, 텍스트가 있으면 이를 화면에 표시합니다.
5) 마이크 접근 및 오디오 스트림 획득
stream = await navigator.mediaDevices.getUserMedia({ audio: true });브라우저의 getUserMedia API를 사용하여 마이크 접근 권한을 요청하고 오디오 스트림을 획득합니다.
6) 변환기에 오디오 스트림 연결
transcriber.connect(stream);획득한 오디오 스트림을 변환기에 연결하여 실시간 음성 인식을 시작합니다.
5. 주의사항
1) 마이크 접근 권한
- 대부분의 브라우저는 HTTPS 환경에서만 마이크 접근을 허용합니다.
- 로컬 개발 시
localhost에서는 접근이 가능하나, 배포 시에는 반드시 HTTPS를 사용해야 합니다.
2) 브라우저 호환성
- Daglo API는 최신 웹 브라우저에서 최적화되어 있습니다.
- 오디오 캡처 API(
getUserMedia)는 IE에서 지원되지 않으므로 Chrome, Firefox, Safari, Edge 등의 최신 브라우저 사용을 권장합니다.
3) 네트워크 연결
- 실시간 음성 인식은 안정적인 네트워크 연결을 필요로 합니다.
- 네트워크 연결이 불안정할 경우 음성 인식 성능이 저하될 수 있습니다.
6. 마무리
이 문서에서는 Daglo API 라이브러리를 활용한 실시간 음성 인식 구현 방법을 살펴보았습니다. 제공된 예제 코드를 통해 웹 브라우저 환경에서 간단하게 음성 인식 기능을 구현할 수 있으며, 이를 다양한 애플리케이션에 활용할 수 있습니다.
더 자세한 내용은 API Reference와 GitHub 저장소를 참고하시기 바랍니다.