見出し画像

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

npaka

「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 キー」を選択。

画像1

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. 動作確認

「音声合成」で「おはようございます」という音声が再生されます。

画像2

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)
}

次回


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