JavaScript 음성 인식
14431 단어 JavaScript음성 인식전단 개발음성
당신 의 사이트 에 음성 인식 기능 을 추가 할 생각 이 있 습 니까?예 를 들 어 사용자 가 마 우 스 를 누 르 지 않 고 컴퓨터 나 휴대 전화의 마 이 크 를 통 해서 만 명령 을 내 립 니 다. 예 를 들 어 '페이지 아래로 끌 어 내리 기' 나 '다음 페이지 로 넘 어가 기' 등 사 이 트 는 해당 명령 을 수행 합 니 다. 멋 지게 들 리 나 요? 하지만 이 기능 을 실현 하기 위해 서 는 사이트 의 자 바스 크 립 트 스 크 립 트 가 이러한 음성 입력 을 식별 할 수 있 도록 해 야 합 니 다.
앤 양 이라는 자 바스 크 립 트 언어 입력 라 이브 러 리 를 소개 합 니 다.
Github 주소:https://github.com/TalAter/annyang
2018 년 7 월 12 일 까지 이 github 창 고 는 4833 개의 Star 가 있 었 다.
annyang 은 실제로 2KB 크기 의 JavaScript 스 크 립 트 파일 로 사용 하기에 매우 편리 합 니 다.
다음은 저 와 함께 Hello World 애플 리 케 이 션 을 만 들 겠 습 니 다. 마 이 크 를 통 해 말 하 는 소리 가 이 자 바스 크 립 트 라 이브 러 리 파일 에 어떻게 인식 되 는 지 보 겠 습 니 다.
html 파일 을 새로 만 들 고 아래 코드 를 복사 합 니 다. 로 컬 Tomcat 또는 nodejs 서버 에 배치 합 니 다.
<script src="annyang.min.js">script>
<span style="color: #c678dd;" class="hljs-keyword">if</span> (annyang) {
<span style="color: #c678dd;" class="hljs-keyword">var</span> commands = {
<span style="color: #98c379;" class="hljs-string">"Hello"</span>: <span style="" class="hljs-function"><span style="color: #c678dd;" class="hljs-keyword">function</span>() </span>{
alert(<span style="color: #98c379;" class="hljs-string">" I have heard your voice!"</span>);
}
};
<span style="color: #c678dd;" class="hljs-keyword">var</span> commands2 = {
<span style="color: #98c379;" class="hljs-string">"Bye"</span>: <span style="" class="hljs-function"><span style="color: #c678dd;" class="hljs-keyword">function</span>()</span>{
alert(<span style="color: #98c379;" class="hljs-string">" ！"</span>);
}
}
annyang.addCommands(commands);
annyang.addCommands(commands2);
annyang.start();
}
<<span style="color: #98c379;" class="hljs-regexp">/script>
</</span>html>
</code></pre>
<p style=""> Chrome。</p>
<p style=""> ， Chrome ， 。 Allow 。</p>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 577px;" class="image-container">
<div style="" class="image-container-fill">
</div>
<div style="width: 576.993px; height: 249.993px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
<p style=""> 。 1 。</p>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 700px;" class="image-container">
<div style="" class="image-container-fill">
</div>
<div style="width: 699.993px; height: 107.651px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
<p style=""> ， ， 。 ， ？</p>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 700px;" class="image-container">
<div style="" class="image-container-fill">
</div>
<div style="width: 699.993px; height: 214.265px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
<p style=""> ， ， 。 。</p>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 640px;" class="image-container">
<div style="" class="image-container-fill">
</div>
<div style="width: 639.993px; height: 394.996px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
<p style=""> 。</p>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 259px;" class="image-container">
<div style="" class="image-container-fill">
</div>
<div style="width: 258.993px; height: 193.985px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
<p style=""> Hello alert ， “Hello" ， 。</p>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 640px;" class="image-container">
<div style="" class="image-container-fill">
</div>
<div style="width: 639.993px; height: 351.993px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
<p style=""> ， "Bye" ， “ ”。 “Bye” ， annyang 。</p>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 640px;" class="image-container">
<div style="" class="image-container-fill">
</div>
<div style="width: 639.993px; height: 223.996px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
<p style=""> annyang github ， ， ！</p>
<p style="">https://github.com/TalAter/annyang/blob/master/docs/FAQ.md</p>
<p style=""> ， ！</p>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 640px;" class="image-container">
<div style="padding-bottom: 579px;" class="image-container-fill">
</div>
<div style="width: 639.993px; height: 579px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
<p style=""> ， annyang 。</p>
<p style="">https://www.talater.com/annyang/</p>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 225px;" class="image-container">
<div style="padding-bottom: 225px;" class="image-container-fill">
</div>
<div style="width: 225px; height: 225px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
<p style=""> Jerry ， " " :</p>
<p> </p>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 283px;" class="image-container">
<div style="" class="image-container-fill">
</div>
<div style="width: 282.993px; height: 292.975px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
<div style="" class="image-package">
<div style="background-color: transparent; margin: 0px auto; max-width: 700px;" class="image-container">
<div style="" class="image-container-fill">
</div>
<div style="width: 699.993px; height: 427.265px; overflow: hidden;" class="image-view">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1176879270455226368"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">
번 호 를 바꾸다
html 작은 공이 부딪치다
설탕
html5
dinguangx
jeeshop 쇼핑 몰 시스템 jshop 전자상거래 시스템
주 범 양
java 알고리즘 시간 복잡 도 능률.
g21121
java
510888780
linux
천벌
Permission
aijuans
java oracle
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 기타
첫 페이지 -
우리 -
역 내 검색 -
Sitemap -
권리 침해 신고
모든 IT 지식 창고 저작권© 2000 - 2050 IT 지식 창고 IT610. com, 판권 소유.
경 ICP 비 09083238 호
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
