質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

受付中

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

ryo0407
ryo0407

総合スコア0

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0グッド

1クリップ

308閲覧

投稿2022/11/09 15:15

前提

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

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

実現したいこと

読み上げを実現する。

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

イメージ説明

エラーメッセージ TypeError: Cannot read properties of undefined (reading 'replace') speak@script.js:75 onclick@index.html?textBox1=…3%83%8F%E3%83%81:31 

該当のソースコード

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

Javascript

1 2function speak(button, text) { 3 const url = "https://texttospeech.googleapis.com/v1/text:synthesize?key=" + apiKey; 4 const data = { 5 "input": { 6 "text": text 7 }, 8 "voice": { 9 "languageCode": "ja-JP", 10 "name": "ja-JP-Standard-B" 11 }, 12 "audioConfig": { 13 "audioEncoding": "MP3", 14 "speaking_rate": "1.00", 15 "pitch": "0.00" 16 } 17 } 18 const otherparam={ 19 headers: { 20 "content-type": "application/json; charset=UTF-8" 21 }, 22 body: JSON.stringify(data), 23 method: "POST" 24 } 25 fetch(url, otherparam) 26 .then(data=>{return data.json()}) 27 .then(res=>{ 28 try { 29 var blobUrl = base64ToBlobUrl(res.audioContent) 30 var audio = new Audio() 31 audio.src = blobUrl 32 audio.play() 33 } catch(e) { 34 console.log(e) 35 } 36 }) 37 .catch(error=>alert(error)) 38 } 39 40 // Base64 → BlobUrl 41 function base64ToBlobUrl(base64) { 42 var bin = atob(base64.replace(/^.*,/, '')) 43 var buffer = new Uint8Array(bin.length) 44 for (var i = 0; i < bin.length; i++ ) { 45 buffer[i] = bin.charCodeAt(i) 46 } 47 return window.URL.createObjectURL(new Blob([buffer.buffer], {type: "audio/wav"})) 48 } 49

試したこと

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

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

VisualStudioCode

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/11/10 00:22

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

回答2

1

エラーメッセージ TypeError: Cannot read properties of undefined (reading 'replace') speak@script.js:75 onclick@index.html?textBox1=…3%83%8F%E3%83%81:31

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

投稿2022/11/09 16:57

atcoderyellow

総合スコア481

退会済みユーザー👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/11/09 23:53

こちらの回答が複数のユーザーから「質問に対する回答となっていない投稿」という指摘を受けました。

0

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

投稿2022/11/09 15:52

arcxor

総合スコア2141

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/11/10 01:32

こちらの回答が他のユーザーから「説明が不足している回答」という指摘を受けました。

回答へのコメント

ryo0407

2022/11/11 05:54

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

2022/11/11 06:26

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

2022/11/13 14:03

おっしゃる通り、別のJSファイルに下記のみ記載しており、<>を外してみました。 var apiKey = '<AIzaSyDbSRpBsOpWADQ1JE02jIkVDYeKdoFNB3I>' ↓ var apiKey = 'AIzaSyDbSRpBsOpWADQ1JE02jIkVDYeKdoFNB3I' が、、、エラーの結果は変わらずでした…。 2つ目のjsファイルがうまく連動してないのでしょうか…

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。