見切り発車で平仮名の学習アプリを作る【5日目】

2024年のアドベントカレンダー5日目の記事です。

音声入力を実施したい#1

STTを行うにあたり、GoogleだったりIBMだったりMicrosoftだったりのAPIを軽く見てみたものの無料枠はあるものの基本は有料かつ導入が地味にめんどくさそうだったりでどうしたものかとなりました。

他にお手軽なSTTあったかなぁと思いつつ記憶をたどってみると昔web speech apiなるものを触ったことがあったことを思い出しました。

ブラウザの対応状況を見たところchromeだけではなくios safariにも対応していたので、甥っ子が触る環境（私のPCもしくはタブレット）での動作も問題なさそうなため、STTの処理についてはweb speech apiを利用することにしました。

音声入力のスタート、ストップのタイミングでボタンの表示を変えるため、状態管理のstateの追加と状態の変更を行うメソッドを追加します。

App.js

import './App.css';
import { Provider } from './components/ui/provider';
import { Box, AbsoluteCenter, Heading, VStack, HStack } from '@chakra-ui/react';
import { useState } from 'react';
import { Button } from './components/ui/button';

function App() {
  const [question, setQuestion] = useState('あとですぷしからしゅとくするようにします');
  const [isRecording, setIsRecording] = useState(false);

  const startRecording = () => {
    setIsRecording(true);
  }

  const stopRecording = () => {
    setIsRecording(false);
  }

  return (
    <Provider>
      <Box bg="blue.100" w="100vw" h="100vh">
        <AbsoluteCenter>
          <VStack gap="20">
            <Heading size="5xl">
              {question}
            </Heading>
            <HStack gap="20">
              <Button size="2xl" variant="outline" borderColor="green.600" color="green.600"onClick={isRecording ? stopRecording : startRecording}>
                {isRecording ? "こたえた" : "こたえる"}
              </Button>
              <Button size="2xl" variant="outline" borderColor="orange.600" color="orange.600">
                わからない
              </Button>
            </HStack>
          </VStack>
        </AbsoluteCenter>
      </Box>
    </Provider>
  );
}

export default App;

これによりボタンクリックでisRecordingのステートにより呼び出しメソッドが変わり、呼ばれたメソッド内でステートを切り替えることができました。

音声入力部分を作るのはまた次回頑張ります