Help us understand the problem. What is going on with this article?

Web Speech API Speech Recognition で数値の認識を統一する

概要

https://qiita.com/hmmrjn/items/4b77a86030ed0071f548
こちらの記事などを参考に音声認識アプリケーションを作っていました。
「10キロ」「20キロ」など数値を入力する際に、数字と漢数字が混ざって扱いづらいのでどうにかしたい。

再現手順

  1. 以下のデモサイトにアクセス
  2. 日本語を選択して、「10キロ、20キロ、30キロ、…」としゃべっていく。
  3. テキスト化された内容を確認すると数字と漢数字が混じっている
    • 60 と 70 が割と怪しい
    • 六十キロ 七十キロ
    • まとめてしゃべると補正するようだが単体だとダメ

解決方法

      // 日本語の数字を単語として登録する
      const grammar =
        '#JSGF V1.0 JIS ja; grammar numbers; public <numbers> = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 ;'
      const SpeechGrammarList =
        window.webkitSpeechGrammarList || window.SpeechGrammarList
      const speechRecognitionList = new SpeechGrammarList()
      speechRecognitionList.addFromString(grammar, 1)
      recognition.grammars = speechRecognitionList
  • 受け取れるテキストが数字になる
  • (とりあえず動いたのでオッケーとする)

動作確認サンプルコード

  • Nuxt.js Vuetify 環境のサンプルコード
recognition-test.vue
<template>
  <v-row justify="center">
    <v-col sm="12" md="11" lg="9" xl="6">
      <v-sheet class="pa-3">
        <h1 id="hoge">音声認識テスト</h1>
        <v-row align="center" justify="center" class="mt-2 mb-10 px-2">
          <v-btn
            outlined
            :disabled="disabled"
            color="iconcolor"
            rounded
            block
            @click="start"
            >{{ text }}</v-btn
          >
        </v-row>
        <v-sheet elevation="6">
          <v-list light>
            <v-list-item>
              <v-list-item-content
                >※ここに認識した音声が表示されます</v-list-item-content
              >
            </v-list-item>
            <v-list-item v-for="(log, i) in logs" :key="i">
              <v-list-item-content>{{ log }}</v-list-item-content>
            </v-list-item>
          </v-list>
        </v-sheet>
      </v-sheet>
    </v-col>
  </v-row>
</template>

<script>
export default {
  data() {
    return {
      text: '音声認識スタート',
      disabled: false,
      logs: []
    }
  },
  methods: {
    start() {
      const SpeechRecognition =
        window.webkitSpeechRecognition || window.SpeechRecognition
      const recognition = new SpeechRecognition()
      recognition.continuous = true

      // 日本語の数字を単語として登録する
      const grammar =
        '#JSGF V1.0 JIS ja; grammar numbers; public <numbers> = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 ;'
      const SpeechGrammarList =
        window.webkitSpeechGrammarList || window.SpeechGrammarList
      const speechRecognitionList = new SpeechGrammarList()
      speechRecognitionList.addFromString(grammar, 1)
      recognition.grammars = speechRecognitionList

      recognition.onresult = (event) => {
        const inputMessage =
          event.results[event.results.length - 1][0].transcript
        this.logs.push(inputMessage)
      }
      recognition.onend = (event) => {
        // 一定時間入力が無いと終了するので継続する
        recognition.start()
      }

      recognition.start()

      this.text = '何かしゃべってください!'
      this.disabled = true
    }
  }
}
</script>
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away