[JavaScript30] 🎙 20. Native Speech Recognition

17238 ワード
JavaScript javascript30 テキストリンク

🎙 20. Native Speech Recognition


音声認識で画面に出力します.

イニシャルコード
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speech Detection</title>
</head>
<body>
    <div class="words" contenteditable>
    </div>
    <script>
        window.SpeechRecognition = window.SpeechRecongnition || window.webkitSpeechRecognition;
    </script>
</body>
    <style>
        html{
            font-size: 10px;
        }
        body{
            background: #ffc600;
            font-family: 'helvetica neue';
            font-weight: 200;
            font-size: 20px;
        }
        .words{
            max-width: 500px;
            margin:50px auto;
            background: #fff;
            border-radius: 5px;
            box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
            padding: 1rem 2rem 1rem 5rem;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
            background-size: 100% 3rem;
            position: relative;
            line-height: 3rem;
        }
        
        p {
            margin: 0 0 3rem;
        }

        .words:before {
            content: '';
            position: absolute;
            width: 4px;
            top: 0;
            left: 30px;
            bottom: 0;
            border: 1px solid;
            border-color: transparent #efe4e4;
        }
    </style>
</html>
初期画面

🌏 新知


👉 SpeechRecognition


Web Speech APIの音声認識インタフェースは、サービスを識別するためのコントローラインタフェースであり、識別サービスが送信する音声認識イベントも処理する.
注意!ブラウザの互換性を確認します.
注意:
https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

👉 SpeechRecognition.interimResults


音声認識インタフェースの一時結果属性は、中間結果(真)(偽)を返すかどうかを制御する.
中間結果はまだ最終結果ではありません(例えば、音声認識結果.isFinal属性はfalse).
intervalResultsのデフォルト値はfalseです.
注意:
https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/interimResults

🌏 プロセス


👉 1.音声認識の設定と変数の作成

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.interimResults = true;
window.SpeechRecognitionをブラウザに従ってwebkitプロパティを適用します.
interResultは、中間結果を返すかどうかを制御します.

👉 2.ブラウザに音声を表示する

let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);

recognition.addEventListener('result', e =>{
    console.log(e.results);
    const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('')
    p.textContent = transcript;
    
    /*Finished에 있는 부분*/
    const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩'); 
    p.textContent = poopScript;
    if(transcript.includes('유니콘')){
        console.log('유니콘22');
    }
    if(e.results[0].isFinal){
        p = document.createElement('p');
        words.appendChild(p);
    }
    
});
音声認識結果を配列に変換してテキスト、poop|pooなどのスラングを入れる💩としてマークされます.
ユニコーンといえばコンソールにユニコーン22が印刷されます
話が終わると、pの中で1つの言葉で内容を表し、話が終わると、新しい文が再開されます.

👉 3.実行イベント

recognition.addEventListener('end', recognition.start);
recognition.start();
▼▼TIL 6・Javascriptベース
タイプスクリプト