kakao i cloud로 STT 시작하기 (2)HTML 수정하기
2023. 2. 27. 16:30ㆍ기타 도구/STT
General STT API
General STT API 사용 가이드
console.kakaoi.io
위 경로에 들어가면 HTML / JavaScript 샘플코드를 받을 수 있습니다.
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<meta charset="UTF-8">
<title>File Upload Client</title>
<script type="text/javascript">
let ws = null;
function connector(){
// must modify endpoint
var uri = '여기에 ws로 시작하는 주소를 넣으시면 됩니다';
alert(uri)
ws = new WebSocket(uri);
ws.binaryType="arraybuffer";
// 1. send recogStart message (RAWPCM/16/16000/1/_/_)
ws.onopen=function(){
const now = Date.now()
ws.send(`{"type":"recogStart","service":"DICTATION","showFinalOnly":true,"showExtraInfo":false,"requestId":"GNTWSC-${now}","audioFormat":"_/16/16000/1/_/_"}`)
alert("연결 완료");
};
// 2. read server message
ws.onmessage = function(e){
let out = document.getElementById('output');
out.innerHTML += e.data + '<br>';
};
setTimeout(function() {
ws.close();
}, 3600000);
ws.onclose = function() {
alert("연결 종료");
};
ws.onerror = function(e) {
alert("onerror: " + e.msg);
}
}
function sleep(ms) {
return new Promise((r) => setTimeout(r, ms))
}
function sendFile(){
let file = document.getElementById('file').files[0];
alert('start');
let reader = new FileReader();
let rawData;
reader.loadend = function() {
}
// 3. async send audio binary message (file) and control sending speed
reader.onload = async function(e) {
rawData = e.target.result;
const chunkLength = 640;
const sleepDuration = 20;
let begin = 0;
let end = chunkLength;
while(end < rawData.byteLength) {
await ws.send(rawData.slice(begin, end));
await sleep(sleepDuration);
begin = end;
end = begin + chunkLength;
}
await ws.send(rawData.slice(begin, rawData.byteLength));
// 4. send recogEnd message
await ws.send('{"type":"recogEnd"}');
alert("파일 전송이 완료 되었습니다.");
}
reader.readAsArrayBuffer(file);
}
function addEvent(){
document.getElementById("connect").addEventListener("click", connector, false);
document.getElementById("send").addEventListener("click", sendFile, false);
}
window.addEventListener("load", addEvent, false);
</script>
</head>
<body>
<input id="file" type="file" accept=".wav, .mp3">
<input id="connect" type="button" value="connect">
<input id="send" type="button" value="send">
<p id="output"></p>
</body>
</html>저는 JSP파일로 사용하려고 기본 제공하는 코드에 한글이 깨지지 않도록 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>를 추가해주었습니다.
HTML로 사용하시려면 var uri만 변경해 주세요.
var uri = 'wss://****************************' (API인증정보에서 받은 API Endpoint URL)으로 변경해주시면 됩니다.
▽▽혹시 자신의 API Endpoint URL가 뭔지 모르신다면 아래 글을 참고해주세요.▽▽
'기타 도구 > STT' 카테고리의 다른 글
| 조금 더 편리하게 만든 카카오STT 샘플 jsp (0) | 2023.03.02 |
|---|---|
| kakao i cloud로 STT 시작하기 (3)HTML 실행하기 (0) | 2023.02.27 |
| [kakao i cloud] Audacity로 kakao i cloud의 STT format에 맞는 mp3파일 만들기 (0) | 2023.02.24 |
| kakao i cloud로 STT 시작하기 (1)인증키 받기 (0) | 2023.02.15 |
| 카카오 STT 사용을 위한 WebSocket이란? (0) | 2023.02.13 |