GCP 入門 (8) - Text-to-Speech API をJavaScriptから使う
「GCP」(Google Cloud Platform)の「Text-to-Speech」をJavaScriptから使う方法をまとめました。
・Chrome 87.0.4280.141
前回
1. Text-to-Speech
「Text-to-Speech」は、テキストを音声に変換するAPIです。
主なタスクは、次のとおりです。
・音声ファイルの作成
テキスト・SSMLを音声ファイルに変換。
料金は、次のとおりです。
2. プロジェクトの作成とAPIの有効化
(1) GCPの「Cloud Console」を開く。
(2) 画面上端の「プロジェクト名」から新規プロジェクトを作成。
(3) 画面上端の「検索ボックス」で「Text-to-Speech」を検索し、「有効にする」ボタンを押す。
3. APIキーの作成
(1) 「APIとサービス →認証情報」を選択。
(2) 「認証情報を作成 → API キー」を選択。
4. GCPの Text-to-Speech をJavaScriptから使う
「GCP」の「Text-to-Speech」をJavaScriptから使う手順は、次のとおりです。
(1) 以下のHTMLを作成。
・index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<button onclick="speak(this, 'おはようございます')">音声合成</button>
<ul id="output"></ul>
<script src="./api_key.js"></script>
<script src="./main.js"></script>
</body>
</html>
(2) 以下のスクリプトを作成。
・main.js
// 音声合成
function speak(button, text) {
const url = "https://texttospeech.googleapis.com/v1/text:synthesize?key=" + apiKey;
const data = {
"input": {
"text": text
},
"voice": {
"languageCode": "ja-JP",
"name": "ja-JP-Standard-B"
},
"audioConfig": {
"audioEncoding": "MP3",
"speaking_rate": "1.00",
"pitch": "0.00"
}
}
const otherparam={
headers: {
"content-type": "application/json; charset=UTF-8"
},
body: JSON.stringify(data),
method: "POST"
}
fetch(url, otherparam)
.then(data=>{return data.json()})
.then(res=>{
try {
var blobUrl = base64ToBlobUrl(res.audioContent)
var audio = new Audio()
audio.src = blobUrl
audio.play()
} catch(e) {
console.log(e)
}
})
.catch(error=>alert(error))
}
// Base64 → BlobUrl
function base64ToBlobUrl(base64) {
var bin = atob(base64.replace(/^.*,/, ''))
var buffer = new Uint8Array(bin.length)
for (var i = 0; i < bin.length; i++ ) {
buffer[i] = bin.charCodeAt(i)
}
return window.URL.createObjectURL(new Blob([buffer.buffer], {type: "audio/wav"}))
}
(3) 以下のスクリプトを作成。
「<APIキー>」には「GCPの準備」で取得したAPIキーを記述します。
・api_key.js
var apiKey = '<APIキー>'
【注意】 公開する場合は、APIキーに制限をかけるのを忘れずに。
5. 動作確認
「音声合成」で「おはようございます」という音声が再生されます。
6. 参考
【おまけ】 オーディオタグの追加
オーディオタグを追加して、オーディオファイルをダウンロードする例は次のとおりです。
// オーディオタグの追加
function addAudioTag(blobUrl) {
var au = document.createElement('audio')
au.controls = true
au.src = blobUrl
output.appendChild(au)
var br = document.createElement('br')
output.appendChild(br)
}
【おまけ】 Web Speech API による音声合成
// 音声合成
function speak(button, text) {
var u = new SpeechSynthesisUtterance()
u.text = text
u.lang = 'ja-JP'
u.rate = 1.0
speechSynthesis.speak(u)
}
次回
この記事が気に入ったらサポートをしてみませんか?