Reactでブラウザの音声認識機能を実装してみる - フリーランス　技術調査ブログ

はじめに

Reactでブラウザの音声認識機能を実装してみる。
Web Speech API Speech Recognitionを利用する。Chromeにしか対応していない。またiOSのChromeには対応していない
機種判定やOS判定が必要のため、前回調べた下記のパッケージを利用する px-wing.hatenablog.com

下記のサンプルコードの補足

ボタンを連打すると落ちる
長い文章だと読み取れない。
スマートフォンで確認すると音声のstartおよびstopがされるたびに「ピコン」と音がなるので、すごい気になる。

サンプルコード

import React, {useState} from 'react'
var parser = require('ua-parser-js');

const Voice = () => {

  const ua = parser(navigator.userAgent.toLowerCase());
  const [isVoiceReceive,setIsVoiceReceive] = useState(false)
  const [message,setMessage] = useState([])

  const SppechView = () =>{
    const btn = document.getElementById('btn');

    const speech = new webkitSpeechRecognition();
    speech.lang = 'ja-JP';


    speech.onresult = (event) => {
      setIsVoiceReceive(false)
      speech.stop();
      if(event.results[0].isFinal){
          var autotext =  event.results[0][0].transcript
          const createMessage = message
          createMessage.push(`${autotext}<br />`)
          setMessage(createMessage)
      }
    }

    speech.onend = () => {
      setIsVoiceReceive(true)
      speech.start() 
    };

    const startSpeech = ('click' , ()=> {
      speech.start();
    });

    return (
      <>
        <button id="btn" onClick={startSpeech}>音声認識開始</button>
        {isVoiceReceive ? '話してください' : '話さないでください'}<br/>
        メッセージ件数:{message.length}<br/>
        <div
          dangerouslySetInnerHTML={{
            __html: message
          }}
        />      
      </>
    )
  }


  return(
    <>
      <h2>音声認識</h2>
      {ua.browser.name == "chrome" ?
        <SppechView /> : 
        'あなたのブラウザはサポートしておりません。Chromeからアクセスしてください。'
      }
    </>
  )
}

export default Voice