BETA

Chromeで音声認識をしてみた

投稿日:2020-04-24
最終更新:2020-04-24

はじめに

Google ChromeでWeb Speech APIのSpeechRecognitionを使って音声認識をしてみた。

参考

環境

  • Google Chrome 81.0.4044.122
  • macOS Mojave 10.15.4
  • MacBook Air内蔵マイク

使い方

<!DOCTYPE html>  
<!-- ↓lang属性で言語を指定 -->  
<html lang="ja">  

<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>SpeechRecognition</title>  
</head>  

<body>  
  <script>  
    const rec = new webkitSpeechRecognition();  

    rec.start();  

    rec.addEventListener('start', (e) => console.log('start', e));  
    rec.addEventListener('audiostart', (e) => console.log('audiostart', e));  
    rec.addEventListener('soundstart', (e) => console.log('soundstart', e));  
    rec.addEventListener('speechstart', (e) => console.log('speechstart', e));  
    rec.addEventListener('speechend', (e) => console.log('speechend', e));  
    rec.addEventListener('soundend', (e) => console.log('soundend', e));  
    rec.addEventListener('audioend', (e) => console.log('audioend', e));  
    rec.addEventListener('end', (e) => console.log('end', e));  

    // `e.results[0][0].transcript`にある  
    rec.addEventListener('result', (e) => console.log('result', e));  
    rec.addEventListener('error', (e) => console.log('error', e));  
    rec.addEventListener('nomatch', (e) => console.log('nomatch', e));  
  </script>  
</body>  

</html>  

実践

<!DOCTYPE html>  
<!-- ↓lang属性で言語を指定 -->  
<html lang="ja">  

<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>SpeechRecognition</title>  
</head>  

<body>  
  <p>Webブラウザのコンソール見て</p>  
  <button id=start>START</button>  
  <button id=stop>STOP</button>  
  <script>  
    const $start = document.getElementById('start');  
    const $stop = document.getElementById('stop');  
    const rec = new webkitSpeechRecognition();  

    // ↓により都度スタートボタンを押さずとも続けて話すことができる  
    rec.continuous = true;  

    rec.addEventListener('audiostart', (e) => {  
      // ↓が出力されてから話し始める  
      console.log('audiostart');  
    });  
    rec.addEventListener('result', (e) => {  
      console.log(e.results);  
    });  
    rec.addEventListener('error', (e) => {  
      // 私の環境ではエラーは出なかった  
      console.error(e);  
    });  

    $start.addEventListener('click', () => {  
      rec.start();  
    });  
    $stop.addEventListener('click', () => {  
      rec.stop();  
    });  
  </script>  
</body>  

</html>  

おわりに

さすがGoogle。すごい。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

おかゆりぞっとのさほど技術的ではないブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう