반응형
Native Speech Recognition
목표
음성인식을 구현해 보려함
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Speech Detection</title>
</head>
<body>
<div class="words" contenteditable>
</div>
<script>
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
</script>
<style>
html {
font-size: 10px;
}
body {
background:#ffc600;
font-family: 'helvetica neue';
font-weight: 200;
font-size: 20px;
}
.words {
max-width:500px;
margin:50px auto;
background:white;
border-radius:5px;
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
padding:1rem 2rem 1rem 5rem;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background-size: 100% 3rem;
position: relative;
line-height:3rem;
}
p {
margin: 0 0 3rem;
}
.words:before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
</style>
</body>
</html>과정
- 브라우저에서 음성인식을 위해 설정
- 음성인식을 할 수 있도록 상수 생성
- 말한 내용을 p태그로 브라우저에 표시
- 이벤트 실행
코드 분석
1. 브라우저에서 음성인식을 위해 설정
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;브라우저에 따라 webkit속성을 적용
2. 음성인식을 할 수 있도록 상수 생성
const recognition = new SpeechRecognition();
recognition.interimResults = true;recognition에 음성인식을 할 수 있는 함수를 담아 반환값을 주도록 함
3. 말한 내용을 p태그로 브라우저에 표시
let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);
recognition.addEventListener('result', e => {
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join('');
const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
p.textContent = poopScript;
if (e.results[0].isFinal) {
p = document.createElement('p');
words.appendChild(p);
}
});words에 클래스가 word인 요소를 담아 말하는 내용을 담음
음성인식의 결과를 배열로 변환해 텍스트에 담고, 비속어는 💩로 표시함
말이 끝나면 p에 한 문장으로 내용을 담고 말이 끝나면 새로운 문장에 다시 시작됨
4. 이벤트 실행
recognition.addEventListener('end', recognition.start);
recognition.start();말을 하면 음성인식이 시작되고, 멈추면 음성인식이 다시 시작된다
찾아본 내용, 알게된 내용들
webkit - 사파리에서 사용하다 브라우저 전역으로 확대, 각종 기능들을 가지고 있음