More than 5 years have passed since last update.

株式会社オプト

Watsonで入門するリアルタイム音声認識

Posted at 2017-03-28

1 / 25

When

2017/03/28

WebAudio.tokyo #4

自己紹介

ちきさん
(Tomohiro Noguchi)

Twitter/GitHub/Qiita: @ovrmrw

ただのSIer。

Angular Japan User Group (ng-japan)スタッフ。

今回のGitHubリポジトリ

フロントエンド: ovrmrw/webaudio-meetup-react-example

バックエンド: ovrmrw/cognitive-server-starter

あるとき僕は、リアルタイム音声認識をやりたいと思い立った。

何から始めればいいんだろう？

リアルタイムに音声入力したいと思ったら把握しなければいけないこと。

つらい

探したらお手軽っぽいの見つかった。

Watson Speech to Text

Speech-to-Text APIのデモサイト。

マイクがあれば音声認識を実際に試すことができる。

watson-developer-cloud/speech-to-text-nodejs

前ページのデモサイトをgit cloneして動かせるGitHubリポジトリ。

サンプルコードが以前はjQueryベースだったが、今はReactベースになって多少読みやすくなった。

Watsonデモサイトで使われているお手軽ライブラリ

saebekassebil/microphone-stream
- WebAudio APIをうまいことラップしてStreamとして扱えるようにするライブラリ。
watson-developer-cloud/speech-javascript-sdk
- 上記のライブラリをさらにラップしてWatson Speech-to-Text APIを簡単に扱えるようにするライブラリ。

WebAudio APIを直接叩かずにリアルタイム音声入力できる。しかもWatsonで音声認識できる。

(connpassより)

イベント概要

WebAudio.tokyoはWeb Audio APIのための勉強会です。

＿人人人人人人人人人人人人人人人人人人人＿
＞　Web Audio APIのための勉強会です。　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣

Reactでミニマムなサンプルコードを書いてみよう

（デモ）

必要なライブラリをimport

src/Mic.tsx

import * as recognizeMicrophone from 'watson-speech/speech-to-text/recognize-microphone'

(TypeScriptの場合)

Watsonを使うためのTokenを取得するメソッド

src/Mic.tsx

  getTokenAsync() {
    return fetch('http://localhost:4000/api/watson/speech-to-text/token')
      .then(res => res.json())
      .then(data => data.token)
  }

(Tokenを取得するためのバックエンドサーバーが localhost:4000 で稼働している)

AudioContextをオン/オフするためのメソッド

RECボタン/STOPボタンがクリックされたときに呼ばれる。

src/Mic.tsx

  toggleMicrophoneState() {
    if (this.recognizeStream) {
      this.stopRecognizeStream()

    } else if (!this.isRecording) {
      this.isRecording = true

      this.getTokenAsync()
        .then(token => {
          this.setState({ transcripts: [] })
          this.startRecognizeStream(token)
        })
    }
  }

RecognizeStreamを開始するメソッド

Watsonサーバーから返ってくる認識後のデータは stream.on('data', .....) で受け取る。

src/Mic.tsx

  startRecognizeStream(token) {
    const stream = recognizeMicrophone({
      token,
      model: 'ja-JP_BroadbandModel',
      objectMode: true,
      extractResults: true,
    })

    stream.on('data', data => {
      if (data.final) {
        const transcript = data.alternatives[0].transcript
        this.setState({ transcripts: [...this.state.transcripts, transcript] })
      }
    })

    this.recognizeStream = stream
  }

RecognizeStreamを終了するメソッド

stream の stop(), removeAllListeners() を呼ぶのはお作法みたいなもの。

src/Mic.tsx

  stopRecognizeStream() {
    if (this.recognizeStream) {
      this.recognizeStream.stop()
      this.recognizeStream.removeAllListeners()
    }

    this.isRecording = false
    this.recognizeStream = null
  }

src/Mic.tsx の全コード

src/Mic.tsx

import * as React from 'react'
import * as recognizeMicrophone from 'watson-speech/speech-to-text/recognize-microphone'

export class Mic extends React.PureComponent {
  private isRecording = false
  private recognizeStream = null

  constructor(props) {
    super(props)
    this.state = { transcripts: [] }
  }

  getTokenAsync() {
    return fetch('http://localhost:4000/api/watson/speech-to-text/token')
      .then(res => res.json() as any)
      .then(data => data.token)
  }

  async toggleMicrophoneState() {
    if (this.recognizeStream) {
      this.stopRecognizeStream()
    } else if (!this.isRecording) {
      this.isRecording = true
      await this.getTokenAsync()
        .then(token => {
          this.setState({ transcripts: [] })
          this.startRecognizeStream(token)
        })
    }
  }

  startRecognizeStream(token) {
    const stream = recognizeMicrophone({
      token,
      model: 'ja-JP_BroadbandModel',
      objectMode: true,
      extractResults: true,
    })
    stream.on('data', data => {
      if (data.final) {
        const transcript = data.alternatives[0].transcript
        this.setState({ transcripts: [...this.state.transcripts, transcript] })
      }
    })
    this.recognizeStream = stream
  }

  stopRecognizeStream() {
    if (this.recognizeStream) {
      this.recognizeStream.stop()
      this.recognizeStream.removeAllListeners()
    }
    this.isRecording = false
    this.recognizeStream = null
  }

  render() {
    const buttonName = !this.recognizeStream ? 'REC' : 'STOP'
    return (
      <div>
        <div>Mic Component</div>
        <button onClick={() => this.toggleMicrophoneState().then(() => this.forceUpdate())}>
          {buttonName}
        </button>
        <div>{this.state.transcripts.join(', ')}</div>
      </div>
    )
  }
}

たったこれだけでWatsonのリアルタイム音声認識を使いこなせる！

最初はお手軽に動かして、少しずつソースコードを読んで理解を深めよう

Thanks

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up