超初心者がエラーに苦戦中：JavascriptでGoogleのAPIのText to speech

Question

前提

超初心者です。質問が下手と思われるかもしれませんがよろしくお願いいたします。
プログラミング講習の課題で
JavascriptでGoogleのAPIのText to speechを用いた
文章読み上げアプリを作っています。

実装方法はこちらのサイトのまねっこです。このとおりコピペで行っています。
API機能を実装し、合成音声というボタンをおすとに以下のエラーメッセージが発生しました。
https://note.com/npaka/n/nf23247f5f8e4

実現したいこと

読み上げを実現する。

発生している問題・エラーメッセージ

エラーメッセージ
TypeError: Cannot read properties of undefined (reading 'replace')
[e-mail]:75
[e-mail]?textBox1=…3%83%8F%E3%83%81:31


該当のソースコード

上記リンク先のまんまです。エラーが出ているのは75行目の
fetch(url, otherparam)
です

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

試したこと

私の知識ではなにかを試すことができませんでした。

補足情報（FW/ツールのバージョンなど）

VisualStudioCode

Answer 1

エラーメッセージ
TypeError: Cannot read properties of undefined (reading 'replace')
[e-mail]:75
[e-mail]?textBox1=…3%83%8F%E3%83%81:31

考察: undefinedのプロパティを読めないというTypeErrorが発生している。

Answer 2

apiKey には文字列の先頭と末尾の括弧を含めないでください。

Comments

[ryo0407]

ご回答ありがとうございます。apiKeyとはどの部分をさせていらっしゃいますでしょうか？

[arcxor]

変数 apiKey の具体値を確認してください。先頭と末尾に括弧が付いていませんか。

[ryo0407]

おっしゃる通り、別のJSファイルに下記のみ記載しており、<>を外してみました。

var apiKey = '<AIzaSyDbSRpBsOpWADQ1JE02jIkVDYeKdoFNB3I>'
↓
var apiKey = 'AIzaSyDbSRpBsOpWADQ1JE02jIkVDYeKdoFNB3I'

が、、、エラーの結果は変わらずでした…。
2つ目のjsファイルがうまく連動してないのでしょうか…