음성 제어 UI

Sep 14, 2025
어떻게

지난 몇 년 동안 웹 콘텐츠를 사용하여 많은 앱이 잠시 동안 있었던 것과 동일한 종류의 기능을 갖도록 실제로 웹 콘텐츠를 사용하도록 실제로 많은 새로운 API를 추가했습니다. 비교적 새로운 API는 음성 인식 API이며, 아마도 추측 할 수있는 것처럼 텍스트를 페이지에 입력으로 사용할 수 있습니다. 클릭하여 서비스를 시작하고 다시 중지하려면 클릭하십시오. [삼]

이를위한 훌륭한 경우는 사용자간에 접근성을 허용 할 수 있으며 클릭하는 대안으로 음성 입력을 제공합니다. 귀하의 분석에 많은 모바일 브라우징이 있음을 보여 주면 키보드를 사용하는 것보다 휴대 전화로 얼마나 쉽게 말할 수 있습니다. [삼]

화면 기반 인터페이스가 10 년 이내에 사라지는 예측이있었습니다. 처음에는 공상 과학 소설처럼 들릴 수도 있지만, Alexa와 Siri의 좋아하는 것을 통한 입력으로서 더 편하게 얻을 수 있으므로 이것은 입력 방법으로 퍼지는 것이라는 이유로 나타납니다. 자습서에서는 Speech 입력 속도를 높이고 제품 리뷰를 남기기 위해 사용합니다. 전자 상거래 사이트 ...에 [삼]

파일을 다운로드하십시오 이 자습서의 경우. [삼]

  • 음성 인터페이스 설계를위한 8 개의 팁

01. 프로젝트를 시작하십시오

Build a voice controlled UI: Start the project [삼]

이미 작성된 CSS에 대해 걱정하지 마십시오 [이미지 : 웹 디자이너]

프로젝트 파일 폴더에서 코드 IDE에서 '시작'폴더를 열고 'speee.html'파일을 열어 편집하십시오. 프로젝트의 모든 CSS는 음성 API의 초점이 아니므로 작성되므로 Noto Serif TypeFace를 가져 와서 CSS 파일을 링크하기 위해 여기에 표시된 링크를 추가하십시오. [삼]

& lt; 링크 href = "https://fonts.googleapis.com/csss?family=noto + serif"rel = "stylesheet"& gt; & lt; 링크 rel = "스타일 시트"href = "css / style.css"& gt;

02. 콘텐츠를 추가하십시오

이것의 첫 번째 요소는 모든 화면 내용을 모두 보유 할 래퍼를 가질 것입니다. 여기에서 첫 번째 요소는 브라우저에서 음성 API가 지원되는 경우 사용자에게 알리는 숨겨진 메시지가됩니다. 이는 그렇지 않은 경우에만 볼 수 있습니다. 그런 다음 제목은 다음과 같은 양식 요소가 메시지에 사용되도록 사용자에게 알려줍니다. [삼] & lt; div id = "래퍼"& gt; & lt; SPAN ID = "지원되지 않는"클래스 = "숨겨진"& gt; 음성 API는 지원되지 않습니다. & lt; / span & gt; 귀하의 메시지 : & lt; / h2 & gt;

03. 결과를 선택하십시오

음성 API를 사용할 때 콘텐츠를 표시하는 두 가지 방법이 있습니다. 하나는 사용자가 말하기를 중지했을 때 텍스트가 표시되고 '듣기'버튼을 클릭하십시오. 다른 하나는 음성으로 화면에 단어를 보여줍니다. 이 첫 번째 라디오 버튼을 사용하면 최종 음성 결과가 표시됩니다. [삼] & lt; div id = "typeOfInput"& gt; & lt; span & gt; 결과 : & lt; / span & gt; & lt; label & gt; & lt; 입력 유형 = 라디오 이름 = 인식 유형 값 = 최종 & gt; 최종 음성 & lt; / label & gt;

04. 라디오 2.

두 번째 라디오 버튼이 여기에 추가되어 있으며이 사용자는 사용자가 표시 할 텍스트를 선택할 수 있습니다. 이러한 라디오 버튼은 나중에 JavaScript에 의해 픽업되어 음성 입력을 제어하는 ​​데 사용되지만, 이제는 사용자가 컨트롤링 할 인터페이스를 사용할 수있게합니다. [삼] & lt; 라벨 & gt; & lt; 입력 유형 = 라디오 이름 = 인식 유형 값 = 임시 체크 & gt; 당신이 말하는 것처럼 & lt; / label & gt; & lt; / div & gt;

05. 텍스트를 표시합니다

Build a voice controlled UI: Display the text [삼]

사용자의 연설은 '전사'텍스트 영역에서 끝납니다 [이미지 : 웹 디자이너]

사용자가 페이지에 말하는 텍스트를 화면에 표시해야합니다. 여기서는 '전사'의 ID가있는 텍스트 영역이 추가되므로 사용자의 연설이 여기에서 끝나도록 대상으로합니다. 텍스트를 제거하는 분명 버튼도 있습니다. [삼] & lt; TextArea ID = "전사"Readonly & gt; & lt; / textarea & gt; & lt; br / gt; & lt; 버튼 ID = "clear-all"class = "버튼"& gt; 클리어 텍스트 & lt; / button & gt;

06. 마지막 인터페이스

Build a voice controlled UI: The last interface [삼]

음성 단추를 클릭하면 음성 감지가 시작되고 정지 [이미지 : 웹 디자이너]

최종 인터페이스 요소가 지금 화면에 추가됩니다. 음성 단추는 연설을 활성화 및 비활성화하므로 말하기 전에 클릭해야합니다. 다시 클릭하면 그만 중지됩니다. 비교적 새로운 상호 작용이기 때문에 로그 밑에있는 로그는 사용자에게 무엇을 해야할지 알려줍니다. [삼] 

& lt; div class = "button-wrapper"& gt;
    & lt; div id = "speechButton"클래스 = "시작"& gt; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "log"& gt; 클릭하여 말하기 & lt; / div & gt;
& lt; / div & gt;

07. 자바 스크립트 추가

이제 닫는 본문 태그 전에 스크립트 태그를 추가하십시오. 이것은 자바 스크립트가 모두가는 곳입니다. 처음 두 줄은 일치하는 ID로 페이지 요소를 잡고 변수에 저장합니다. 전사는 연설의 텍스트 결과입니다. 로그는 사용자를 사용하는 방법을 사용자에게 업데이트합니다. [삼] & lt; script & gt; var transcription = document.getElementById ( 'transcription'); var log = document.getElementByID ( 'log'); & lt; / script & gt;

08. 변수 결과

다음 몇 변수를 사용하면 더 많은 인터페이스 요소가 캐시됩니다. 음성 단추는 사용자가 음성을 켜고 끌 수있게 해주는 토글이됩니다. 부울, TRUE / FALY 변수로 모니터링합니다. Clear-All 버튼은 만족스러운 음성 결과를 삭제합니다. [삼] 

 var start = document.getElementById ( 'speechButton');
var clear = document.getElementById ( 'clear-all');
var speaking = false;

09. 지원됩니까?

이 코드 가이 음성 기능이 사용자의 브라우저에서 지원되는 경우 코드가 수행하는 첫 번째 작업은 알아내는 것입니다. 이 결과가 null로 돌아 오면 if 문은 숨겨진 메시지를 던지면 동시에 시작 버튼을 인터페이스에서 멀리 떨어져서 음성 입력을 중지합니다. [삼] 

 window.speechRecognition = window.speechRecognition ||
window.webkitspeechRecognition ||
없는;
if (window.speechrecognition === null) {
document.getElementById ( '지원되지 않음'). classlist.remove ( '숨겨진');
start.classlist.add ( '숨김');
} else {

10. 인식을 시작하십시오

음성 인식은 사용 가능한 음성 인식에 대한 'else'로 시작됩니다. 라디오 버튼의 기본값으로 연속 입력이 시작됩니다. 'onResult'함수는 음성 입력 결과를 처리합니다. 이것은 전사의 텍스트 필드에 추가됩니다. [삼] 

 VAR 인식기 = 새 창.
음성 인식();
인식기 .Contourious = true;
인식기. onResult = 함수 (이벤트) {
transcription.TextContent = '';
for (var i = event.resultIndex; I & lt; 이벤트).
결과. 길이; i ++) {

11. 최종 또는 임시?

이제 if 문은 사용자가 텍스트를 말하는 것처럼 텍스트를 표시 하려는지 확인합니다 (중간) 또는 말하기 완료 후 (최종). 임시라면, 각 단어는 '+ ='로 텍스트에 추가되며, 마지막은 전체 텍스트를 거기에 덤프합니다. [삼] 

 (event.results [i] .isfinal) {
transcription.TextContent = Event.Results [i] 
 .Transcript;
} else {
transcription.TextContent + = event.results [i] 
 .Transcript;
}
}
};

12. 취급 오류

대부분의 JavaScript API와 마찬가지로 발생할 수있는 문제와 함께 할 일을 결정할 수있는 오류 처리기가 있습니다. 이들은 '로그'DIV에 던져집니다. 사용자에게 피드백을주기 위해 사용자에게 피드백을 제공합니다. [삼] 

 인식기 = 함수 (이벤트) {
log.innerhtml = '인식 오류 :'+
event.Message + '& lt; br / gt;' + log.innerhtml;
};

13. 말하기 시작!

이벤트 리스너는 사용자가 단추를 클릭하여 말하기 시작할 때 시작됩니다. 사용자가 말하지 않으면 단추가 색상을 변경하여 말하기가 시작되었지만 말하기의 변수가 true로 설정되고 '임시'라디오 버튼이 선택을 위해 사용자의 선택인지 확인합니다. [삼] 

 start.addeventListener ( '클릭', 함수 () {
if (! speaying) {
말하기 = 사실;
start.classlist.toggle ( 'stop');
인식기 .interimResults = 문서.
QuerySelector ( '입력 [이름 = "인식)
on-type "] [value ="interim "]). 확인 된;

14. 입력을 취하십시오

'Try and Catch'명령문은 음성 인식을 시작하고 사용자에게 말하기 시작해야하며 '다시 클릭하면'을 다시 클릭하십시오. '라는 메시지가 표시됩니다. CATCH는 오류를 픽업하여 사용자가 잘못 될 수있는 것을 이해할 수 있도록 '로그'DIV에 던질 것입니다. [삼] 

 TRY {
인식기 .start ();
log.innerhtml = '지금 말하기 시작
& lt; br / gt;을 클릭하여 멈추십시오 ';
} catch (ex) {
log.innerhtml = '인식 오류 :
& lt; br / gt; + ex.Message;
}

15. 중지를 클릭하십시오

이제 사용자가 말하기를 중지하기 위해 클릭하면 음성 인식이 중지됩니다. 단추가 빨간색으로 녹색으로 변경됩니다. 사용자 인터페이스가 업데이트되어 서비스가 중지되었음을 알려줍니다. Speaking 변수는 사용자가 다시 말할 준비가되어있는 False로 설정됩니다. [삼] 

} else {
인식기 ();
start.classlist.toggle ( 'stop');
log.innerhtml = '인식이 멈췄습니다
& lt; br / gt; 클릭하여 말하기 ';
speaking = false;
}
});

16. 텍스트를 지우십시오

Build a voice controlled UI: Clear the text [삼]

지우기 버튼이 잘못 해석 된 음성을 제거합니다 [이미지 : 웹 디자이너]

이 섹션의 최종 코드는 잘못 해석 된 경우 음성 입력 텍스트를 제거하는 분명 단추 일뿐입니다. 파일을 저장하고 브라우저 에서이 작업을 테스트하십시오. 버튼을 클릭하여 컴퓨터로 말하고 결과를 볼 수 있습니다. [삼] 

 clear.addeventListener ( '클릭', 함수 () {transcription.TextContent = '';
});
}

17. 목적을 추가하십시오

이제 작업 예제가 있으므로 인터페이스에 몇 가지 목적이 있어야하므로 사용자가 리뷰를 입력 할 수 있도록 만들 수 있습니다. 페이지를 저장 한 다음 'Reviews.html'의 새 이름을 사용하여 다른 이름으로 저장을 선택하십시오. & lt; div id = "랩퍼"& gt; 다음 HTML 요소를 추가하십시오. 선. [삼] 

 제품 리뷰 & lt; / h1 & gt;
& lt; div id = "리뷰"& lt; & lt; / div & gt;

18. 총 제출

Build a voice controlled UI: Total submission [삼]

제출 단추는 입력 된 음성을 제출합니다 [이미지 : 웹 디자이너]

이전 코드는 리뷰를 보유합니다. 사용자는 음성 입력을 제출해야하므로 코드의 28 줄 28 주위에있는 '명확한 텍스트'버튼이 바로 뒤 직후 제출 버튼을 추가하십시오. 그런 다음 다음 단계에 대해 자바 스크립트로 이동할 수 있습니다. [삼] & lt; 버튼 ID = "제출"클래스 = "버튼"& gt; 검토 제출 & lt; / button & gt;

19. 새로운 인터페이스 요소

JavaScript 맨 위에는 방금 추가 된 새 인터페이스 요소에 대한 참조를 보관하기 위해 새 변수를 추가합니다. 이것들은 페이지의 '리뷰'섹션 내에서 화면에 결과를 제출하고 표시하는 방법을 제공합니다. [삼] 

 var submit = document.getElementByID ( '제출');
var review = document.getElementByID ( '리뷰');

20. 엔트리를 제출하십시오

이제 사용자가 제출 버튼을 클릭하면 코드를 클릭하면 코드에서 88 줄을 입력해야합니다. 첫째, 단락 태그가 생성되고 음성 입력이 이후에 추가됩니다. 그런 다음 '검토'섹션에 추가됩니다. [삼] 

 submit.addeventListener ( '클릭', 함수 () {
p = document.CreateEllement ( 'p');
var textnode = document.createTextNode.
(transcription.Value);
P.AppendChild (TextNode);
review.appendchild (p);
오늘 = 새로운 날짜 ();
s = document.CreateElleeMent ( 'small');

21. 최종 제출

Build a voice controlled UI: Final submission [삼]

제출 된 음성을 저장하려면 데이터베이스를 사용해야합니다 [이미지 : 웹 디자이너]

리뷰가 문서에 타임 스탬프가되도록 날짜가 추가됩니다. 마지막으로 가로 규칙이 추가되어 각 검토가 끝나는 위치를 표시하면 텍스트가 새 입력 준비가 완료됩니다. 페이지를 저장하고이를 테스트하십시오. 이제 귀하가 귀하의 연설을 페이지에 리뷰로 제출할 수 있음을 알 수 있습니다. 지속성을 위해 이러한 결과를 저장하기 위해 데이터베이스를 사용해야합니다. [삼] 

 TextNode = Document.CreateTextNode (오늘);
S.AppendChild (TextNode);
review.appendchild (s);
hr = document.createLement ( 'hr');
검토 .AppendChild (HR);
transcription.TextContent = '';
});

이 기사는 원래 Creative Web Design Magazine의 문제 286에 게시되었습니다. 웹 디자이너 ...에 여기 문제를 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에 [삼]

관련 기사: [삼]

  • 최고의 JavaScript Apis의 14.
  • AI-Powered Chatbot을 구축하십시오
  • 2019 년 5 명의 Emerging UX 트렌드

어떻게 - 가장 인기있는 기사

Apple Watch 앱을 만드는 방법

어떻게 Sep 14, 2025

(이미지 크레디트 : 미래) Apple이 처음 스마트 워치를 대중에게 출시했을 때 모든 사람은 ..

30 개의 Keyshot 렌더링 팁

어떻게 Sep 14, 2025

이미지 렌더링, 모델의 애니메이션 또는 전체 장면의 애니메이션은 예술 작성의 중요한 단계입니..

이 다섯 가지 요인과 반응을 주위에 반응 시키십시오

어떻게 Sep 14, 2025

학습 반응, Facebook과 Instagram에서 사용자 인터페이스를 만드는 JavaScript 라이브러리는 기회를 줄 때..

원래 타로 카드 페인트

어떻게 Sep 14, 2025

첫 번째 타로 데크를 받았을 때 나는 아름다운 삽화와 모든 카드에 수반되는 이야기에 매혹적이�..

파스텔이있는 풍경을 그리는 방법

어떻게 Sep 14, 2025

이 게시물은 파스텔이있는 풍경을 그리는 법을 가르쳐 줄 것입니다. 부드러운 파스텔을 사용할 �..

마법의 빛나는 룬을 페인트하는 방법

어떻게 Sep 14, 2025

이 튜토리얼에서는 글로우에 보이는 신비로운 룬을 페인트하는 방법을 보여 드리겠습니다. 빛나�..

프로젝트 펠릭스가있는 2D 디자인을 3D로 바꾸십시오

어떻게 Sep 14, 2025

최근 Adobe 's New의 사전 출시 [삼] 펠릭스 3D 패키지 2D에서 3D 이미지 제작까지 도약을 즐거운 시간으로 만듭니다. Project Felix는 그림 찬성..

교차 장치 최적화 15 가지 팁

어떻게 Sep 14, 2025

모든 장치를위한 디자인! Anna Dahlström. 그 중요성에 대해 말할 것입�..

카테고리