GCP 入門 (7) - Speech-to-Text をJavaScriptから使う

npaka

2021年1月16日 12:23

「GCP」（Google Cloud Platform）の「Speech-to-Text」をJavaScriptから使う方法をまとめました。

・Chrome 87.0.4280.141

前回

1. Speech-to-Text

「Speech-to-Text」は、音声をテキストに変換するAPIです。

主なタスクは、次のとおりです。

・同期音声認識 (1分)
ローカル・リモートの短い音声ファイルをテキストに変換。
・非同期音声認識 (480分)
リモートの長い音声ファイルをテキストに変換
・ストリーミング音声認識 (5分)
ローカル音声ファイル・音声ストリームをテキストに変換。
・無限ストリーミング音声認識
無限の音声ストリームをテキストに変換。

料金は、次のとおりです。

2. Recorder.js

「Recorder.js」はブラウザ上での音声の録音を行うJavaScriptのライブラリです。

原作者のリポジトリ（mattdiamond/Recorderjs）は、最新のブラウザに対応してなかったので、フォークで修正されているリポジトリ（s1r-J/Recorderjs）を利用します。

詳しくは、以下で解説されています。

3. プロジェクトの作成とAPIの有効化

(1) GCPの「Cloud Console」を開く。
(2) 画面上端の「プロジェクト名」から新規プロジェクトを作成。
(3) 画面上端の「検索ボックス」で「Speech-to-Text」を検索し、「有効にする」ボタンを押す。

4. APIキーの作成

(1) 「APIとサービス →認証情報」を選択。
(2) 「認証情報を作成 → API キー」を選択。

5. GCPの Speech-to-Text をJavaScriptから使う

「GCP」の「Speech-to-Text」をJavaScriptから使う手順は、次のとおりです。

(1) 「dist/recorder.js」を取得。
(2) 以下のHTMLを作成。

・index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
  <button onclick="startRecording(this)">録音開始</button>
  <button onclick="stopRecording(this)">録音停止</button>
  <ul id="output"></ul>
 
  <script src="./api_key.js"></script> 
  <script src="./main.js"></script>  
  <script src="./dist/recorder.js"></script>
</body>
</html>

(3) 以下のスクリプトを作成。

・main.js

// 変数
var audioContext
var recorder
 
// 初期化
window.onload = function init() {
  // オーディオコンテキストの初期化
  audioContext = new (window.AudioContext || window.webkitAudioContext)()

  // 音声入力の取得
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({audio: true}).then((stream) => {
      // レコーダーの生成
      var input = audioContext.createMediaStreamSource(stream)
      audioContext.resume()
      recorder = new Recorder(input) 
    })
  }
}

// 録音開始
function startRecording(button) {
  recorder && recorder.record()
}

// 録音停止
function stopRecording(button) {
  recorder && recorder.stop()
   
  // 音声認識
  audioRecognize()
   
  // レコーダーのクリア
  recorder.clear()
}

// 音声認識
function audioRecognize() {
  // WAVのエクスポート
  recorder && recorder.exportWAV(function(blob) {
    let reader = new FileReader()
    reader.onload = function() {
      // 音声認識
      let result = new Uint8Array(reader.result)
      let data = {
        "config": {
          "encoding": "LINEAR16",
          "languageCode": "ja-JP",
          "audio_channel_count": 2
        },
        "audio": {
          "content": arrayBufferToBase64(result)
        }
      }
      fetch('https://speech.googleapis.com/v1/speech:recognize?key=' + apiKey, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json; charset=utf-8'
        },
        body: JSON.stringify(data)
      }).then(function (response) {
        return response.text()
      }).then(function (text) {
        let result_json = JSON.parse(text)
        // 音声認識結果の表示
        text = result_json.results[0].alternatives[0].transcript
        output.innerHTML += "\n" + text
        console.log("result: " + text)
      })
    }
    reader.readAsArrayBuffer(blob)
  })
}

// ArrayBuffer → Base64
function arrayBufferToBase64(buffer) {
  let binary = ''
  let bytes = new Float32Array(buffer)
  let len = bytes.byteLength
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i])
  }
  return window.btoa(binary)
}

(4) 以下のスクリプトを作成。
「<APIキー>」には「GCPの準備」で取得したAPIキーを記述します。

・api_key.js

var apiKey = '<APIキー>'

【注意】 公開する場合は、APIキーに制限をかけるのを忘れずに。

6. 動作確認

「録音開始」→「発話」→「録音停止」で音声認識が行われ、結果が表示されます。

7. 参考

【おまけ】音声確認用のコード

// オーディオタグの追加
function addAudioTag() {
  // WAVのエクスポート
  recorder && recorder.exportWAV(function(blob) {
    // オーディオタグの追加
    var url = URL.createObjectURL(blob)
    var au = document.createElement('audio')
    au.controls = true
    au.src = url
    output.appendChild(au)
    var br = document.createElement('br')
    output.appendChild(br)
  })
}

次回

この記事が気に入ったらサポートをしてみませんか？