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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

キーワードを話すと画像が出るようにしたいです。

Sane
Sane

総合スコア5

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

-1評価

0クリップ

333閲覧

投稿2022/01/20 02:29

編集2022/01/20 18:12

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>○○○○○</h1> </header>  <div>   <button id="start-btn">start</button>   <button id="stop-btn">stop</button>   <div id="result-div"></div>  </div>  <script>   const startBtn = document.querySelector('#start-btn');   const stopBtn = document.querySelector('#stop-btn');   const resultDiv = document.querySelector('#result-div');   SpeechRecognition = webkitSpeechRecognition ||   SpeechRecognition;   let recognition = new SpeechRecognition();   recognition.lang = 'ja-JP';   recognition.interimResults = true;   recognition.continuous = true;   let finalTranscript = '';      recognition.onresult = (event) => {     let interimTranscript = ' ';    for (let i = event.resultIndex; i < event.results.length; i++) {     let transcript = event.results[i][0].transcript;     if (event.results[i].isFinal) {      finalTranscript += transcript;      } else {      interimTranscript = transcript;     }    } resultDiv.innerHTML = finalTranscript + '<i style="color:#808080;">' + interimTranscript + '</i>'; } startBtn.onclick = () => { recognition.start(); } stopBtn.onclick = () => { recognition.stop(); } </script> </body> </html>

css

* { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #CDEAFA; } header { padding: 10px; position: fixed; top: 0; width: 100%; background-color: #73CDF7; display: flex; align-items: center; text-align: center; position:fixed; } h1 { text-decoration: none; color: #142e37; margin: auto; padding: 0; text-align: center; font-size: 30px; font-family: cursive; width: 100%; } div{ text-align: center; margin-right: 50px; } button{ margin-left: 20px; margin-top: 100px; zoom: 1.8; } #result-div{ margin-top: 25px; zoom: 1.8; }

音声認識で特定のキーワードを話すと画像が表示されるようにしたいです。プログラミングはまだ不慣れなので色々と調べながら進めているのですが、画像が表示できませんでした。どうしたらいいか教えていただきたいです!

こちらはWebサーバー上で動くものにしたいです。
また、キーワードに含まれていないものは画像を表示せず、会話を自動テキスト化するだけにしたいです。現在すでにテキスト化することの方はできています。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

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

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

y_waiwai

2022/01/20 02:30

このままではコードが読めないので、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください
Lhankor_Mhy
m.ts10806

2022/01/20 02:33

現状のコードでどこまでできていて何がわからないのでしょうか 「うまくいかない」では何も伝わらないので、起きている現象を具体的に記載してください
Lhankor_Mhy

2022/01/20 03:03 編集

「画像」とはご提示のコードで言うと、どれのことですか? #result-div ですか?
Sane

2022/01/20 03:17

はい、現在result-divに音声認識で話した内容が文字で出るようになっているので、ここに話している中で特定のキーワードを認識することによって画像が表示されるようにしたいです。 (例えば、公園に行きたいと言うと→公園の画像が表示)
m.ts10806

2022/01/20 03:20

それは仕様になるので、法則決めてください。 AIレベル目指すならDBとかなりの数の教師データ必要になりそうですが。
Sane

2022/01/20 03:31

簡単なサンプルとして作成できればいいので、AIレベルなど高度なものでなくて大丈夫です。 finalTranscriptにimgを加えれば可能だというのを見つけたのですが、その場合はどのようにimgを挿入すればいいのでしょうか?もしわかれば教えていただきたいです。
m.ts10806

2022/01/20 03:32

あとは、表示させたい画像はどこにあるのか準備するのかとか、もっと仕様詰めて設計する必要があると思います。
Sane

2022/01/20 03:36

表示させたい画像はファイルに保存してあるものを使います。
Lhankor_Mhy

2022/01/20 03:40

問題を把握しました。
Sane

2022/01/20 03:58

ご回答いただきありがとうございます。 載せていただいたコードは if(event.results[i].isFinal){ の後ろに入れればいいのでしょうか?
Lhankor_Mhy

2022/01/20 04:03

回答へのコメントは回答のコメント欄にしていただくのが望ましいです。 resultDiv.innerHTML = finalTranscript + '<i style="color:#808080;">' + interimTranscript + '</i>'; を差し替える感じですね。
m.ts10806

2022/01/20 04:03

>ファイルに保存 細かいことかもしれませんが大事なので。画像自体が「ファイル」です。 「どこ」というと大抵は「置かれている具体的な場所」をさします。 WebサービスはWebサーバー上で動くのでそのサーバー内か、もしくは画像検索APIなどで他所様のものを参照するとか(基本直リンクはやらないほうが良いですが、「音声のなかのキーワードにない画像はどうするの」という点が不明でした)
m.ts10806

2022/01/20 04:05

ひとまず現状の質問内容ではそのあたりの要件や想い、現状の問題点が不明なので、原則質問本文に反映してください。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。