GCP 入門 (7) - Speech-to-Text をJavaScriptから使う
「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)
})
}
次回
この記事が気に入ったらサポートをしてみませんか?