Noodl에서 웹 Speech API Speech Recongnition을 사용하십시오!Noodl Javascript 노드의 사용 방법도 설명합니다.

※ 이 기사는 Noodl2입니다.0 사용 중
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名その1boolean)】:function{
//実行したい処理
},
任意のinput名その2boolean)】: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 수 줄로 소리를 식별할 수 있습니다!대단하다!

대응하는 브라우저는 크롬만 불편합니다. 앞으로도 다른 브라우저에서 실현할 수 있기를 바랍니다...!


좋은 웹페이지 즐겨찾기