Noodl에서 웹 Speech API Speech Recongnition을 사용하십시오!Noodl Javascript 노드의 사용 방법도 설명합니다.
Noodl에서 웹 Speech API Speech Recongnition 메서드를 사용합니다.
음성인식을 사용하려면 백엔드 측의 개발이 필요하니 어렵겠죠.
Chrome만 지원하는 브라우저입니다. 웹 Speech API Speech Recognition을 사용하는 경우
몇 줄의 자바스크립트로 간단하게 마이크에서 주운 소리를 문자로 변환할 수 있습니다!
참고 자료
웹 Speech API Speech Recognition에 대한 자세한 내용은 다음과 같습니다.
웹 페이지에서 브라우저의 음성 인식 기능 사용 - 웹 Speech API Speech Recongnition
새해 복 많이 받으세요!소리는 없지만 소리#Noodl#microbit#설날누들pic.twitter.com/nhiWXMCcbp-설날에 먹는 것은 꽈배기면(@hedgehog noodl)December 31, 2019
샘플 페이지 여기 있습니다.
※ 마이크로: 비트가 뽑혔습니다
샘플의 사용 방법
1. Noodl 프로젝트 클론
여기서부터 클론 생성, 그리고 Noodl2.0 읽습니다.
2. 브라우저에서 cherome 열기
오른쪽 위 모서리에 있는 브라우저 아이콘 - URL을 클릭합니다.
URL의 "192.168.XX.xx"를 "localhost"로 변경br/>
※ 브라우저 제한으로 마이크 기능은 localhost나https를 사용하지 않으면 이동할 수 없습니다.서버의 프로그램도 취소할 수 있습니다.
3. 라면 사진 클릭, 마이크 허용
라면 클릭하여 음성인식을 시작합니다.
Noodl의 Javascript 노드 설명
Noodl1.3의 Javascript 노드와 사용이 좀 다른 것 같습니다.
다음은 기본 사용 방법에 대한 설명과 Noodl의 자바스크립트 노드가 비동기적으로 통신할 때의 비결입니다p>
inputs와 outputs
inputs: 임의의 입력 포트를 만들 수 있습니다br/>
모든 출력 포트를 만들 수 있습니다
쓰기inputの名前:'データ型'
사용 가능한 유형: "number", "string", "boolean", "색채", "signal","collection'
mySignal:function
특정 신호가 왔을 때 실행하고 싶을 때 사용br/>
예를 들어 헤더 후 집행 등입니다.
【任意のinput名その1(boolean)】:function{
//実行したい処理
},
【任意のinput名その2(boolean)】:function{
//実行したい処理
}
이렇게 여러 개 추가 가능br/>
Noodl1.3에서 이러한 처리는if문으로 쓴 것이다.2.0이면 더 상큼할 것 같아요
change:function
input의 값 중 하나가 바뀌었을 때 실행합니다.
이 프로젝트의 자바스크립트 노드 내용
샘플에서 라면을 클릭하면 mysignal에 진신호를 보내 음성인식p>
define({
// The input ports of the Javascript node, name of input and type
inputs:{
// ExampleInput:'number',
// Available types are 'number', 'string', 'boolean', 'color' and 'signal',
mySignal:'signal'
},
// The output ports of the Javascript node, name of output and type
outputs:{
// ExampleOutput:'string',
text: "string",
received: "boolean",
finalTextReceived:"boolean"
},
// All signal inputs need their own function with the corresponding name that
// will be run when a signal is received on the input.
mySignal:function(inputs,outputs) {
// ...
outputs.received = false;
outputs.finalTextReceived = false;
outputs.received = false;
SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.onresult = (event) => {
outputs.text = event.results[0][0].transcript;
this.flagOutputDirty("text");
this.sendSignalOnOutput("received");
console.log(event.results[0].isFinal);
outputs.finalTextReceived = (event.results[0].isFinal) ? true:false;
this.flagOutputDirty("finalTextReceived");
}
recognition.start();
},
// This function will be called when any of the inputs have changed
change:function(inputs,outputs) {
// ...
}
})
})
Javascript 노드에서 비동기 통신을 할 때의 비결
Javascript 노드에서 비동기 통신을 할 때
답장을 보냈는데 아웃풋은 변경이 없어요!이러한 문제가 발생했습니다.
기본적으로 Noodl은 inputs가 변경되었을 때 실행 중인 함수를 위해
실행 후 응답을 답장해도 제대로 터치하지 않으면 outputs에 반영되지 않습니다.
이러한 문제를 해결하기 위해 Javascript 노드에 몇 개의 API가 준비되어 있습니다.
this.flagOutputDirty("変更を反映させたいoutputの名前")
inputs 변경 사항을 제외하고 outputs 변경을 터치할 때 사용br/>
이 견본에서 음성 식별의 응답이 되돌아올 때 식별 결과의 문자열은'text'출력에 반영됩니다p>
this.sendSignalOnOutput("任意のoutputの名前(boolean)")
가짜에서 진짜까지 반복되는 불열 신호를 신속하게 보내다br/>
이 견본에서 음성인식의 응답이 되돌아올 때 신호를 보내고
음성인식 애니메이션(라면의 확장)의 트리거 정지p>
총결산
Javascript 수 줄로 소리를 식별할 수 있습니다!대단하다!
대응하는 브라우저는 크롬만 불편합니다. 앞으로도 다른 브라우저에서 실현할 수 있기를 바랍니다...!
Reference
이 문제에 관하여(Noodl에서 웹 Speech API Speech Recongnition을 사용하십시오!Noodl Javascript 노드의 사용 방법도 설명합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kisaichi07/items/5fcf89147b06560d9043텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)