[WEB] speech to text 예제 (chrome browser)

Recent Posts

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Archives

Today

Total

관리 메뉴

MY MEMO

[WEB] speech to text 예제 (chrome browser) 본문

STUDYING/WEB

[WEB] speech to text 예제 (chrome browser)

l_j_yeon 2017. 7. 3. 14:41

출처 : https://www.youtube.com/watch?v=ABoCeLjY0Xo&list=LLrMY3C2G9ShhFi3y6GCkk1w

<!DOCTYPE html>

<head>
	<title>Speech to text converter in JS</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css"/>
	<style tyle="text/css">
		body{
			font-family:verdana;
		}
		#result{
			height:200px;
			border:1px solid #ccc;
			padding:10px;
			box-shadow: 0 0 10px 0 #bbb;
			margin-bottom: 30px;
			font-size: 14px;
			line-height: 25px;
		}
		button{
			font-size:20px;
			position: absolute;
			top:240px;
			left:50%;
		}
	</style>
</head>

<h4 align="center">Speech to text converter in JS</h4>
	<div id="result"></div>
	<button onClick="startConverting();" type="button"><i class="fa fa-microphone"></i></button>

//insert in html
var r=document.getElementById('result');

function startConverting ()
{
		//check this browser is chrome or not. because this application supported only in chrome browser

if('webkitSpeechRecognition'in window){
			//Web speech API Function
			var speechRecognizer = new webkitSpeechRecognition();
			//continuous : you will catch mic only one time or not
			speechRecognizer.continuous = true;
			//interimResults : during capturing the mic you will send results or not
			speechRecognizer.interimResults = true;
			//lang : language (ko-KR : Korean, en-IN : englist)
			speechRecognizer.lang="en-IN";
			//start!
			speechRecognizer.start();

var finalTranscripts = '';

//if the voice catched onresult function will start
			speechRecognizer.onresult=function(event){
				var interimTranscripts='';
				for(var i=event.resultIndex; i < event.results.length; i++)
				{
					var transcript=event.results[i][0].transcript;
					transcript.replace("\n","<br>");

//isFinal : if speech recognition is finished, isFinal = true
					if(event.results[i].isFinal){
						finalTranscripts+=transcript;
					}
					else{
						interimTranscripts+=transcript;
					}
				}
				//insert into HTML
				r.innerHTML=finalTranscripts+'<span style="color:#999">'+interimTranscripts+'</span>';
			};
			speechRecognizer.onerror = function(event){
			};
		}
		else{
			//if browser don't support this function. this message will show in your web
			r.innerHTML ="your browser is not supported. If google chrome. Please upgrade!";
		}
	}
</script>

저작자표시 비영리 변경금지

'STUDYING > WEB' 카테고리의 다른 글

[WEB] node.js mongodb 설치 및 연동 (0)	2018.01.11
[WEB] website translating (0)	2017.07.03
[WEB] Naver Login api (0)	2017.06.17
[AJAX] AJAX와 JSON으로 실시간 익명 채팅 사이트 구현하기 (0)	2017.06.14
[AJAX] AJAX와 Servlet 개념잡기 (0)	2017.06.13

공유하기 링크

페이스북
카카오스토리
트위터

'STUDYING/WEB' Related Articles

Comments

MY MEMO

[WEB] speech to text 예제 (chrome browser) 본문

[WEB] speech to text 예제 (chrome browser)

'STUDYING > WEB' 카테고리의 다른 글

티스토리툴바