html
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5<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> 6</header> 7 <div> 8 <button id="start-btn">start</button> 9 <button id="stop-btn">stop</button> 10 <div id="result-div"></div> 11 </div> 12 13 <script> 14 const startBtn = document.querySelector('#start-btn'); 15 const stopBtn = document.querySelector('#stop-btn'); 16 const resultDiv = document.querySelector('#result-div'); 17 18 SpeechRecognition = webkitSpeechRecognition || 19 SpeechRecognition; 20 let recognition = new SpeechRecognition(); 21 22 recognition.lang = 'ja-JP'; 23 recognition.interimResults = true; 24 recognition.continuous = true; 25 26 let finalTranscript = ''; 27 28 recognition.onresult = (event) => { 29 let interimTranscript = ' '; 30 for (let i = event.resultIndex; i < event.results.length; i++) { 31 let transcript = event.results[i][0].transcript; 32 if (event.results[i].isFinal) { 33 finalTranscript += transcript; 34 } else { 35 interimTranscript = transcript; 36 } 37 } 38 resultDiv.innerHTML = finalTranscript + '<i style="color:#808080;">' + interimTranscript + '</i>'; 39 } 40 41 startBtn.onclick = () => { 42 recognition.start(); 43 } 44 stopBtn.onclick = () => { 45 recognition.stop(); 46 } 47 </script> 48</body> 49 </html> 50
css
1 2* { 3 box-sizing: border-box; 4} 5body { 6 margin: 0; 7 padding: 0; 8 font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; 9 background-color: #CDEAFA; 10} 11header { 12 padding: 10px; 13 position: fixed; 14 top: 0; 15 width: 100%; 16 background-color: #73CDF7; 17 display: flex; 18 align-items: center; 19 text-align: center; 20 position:fixed; 21} 22h1 { 23 text-decoration: none; 24 color: #142e37; 25 margin: auto; 26 padding: 0; 27text-align: center; 28 font-size: 30px; 29font-family: cursive; 30 width: 100%; 31} 32div{ 33text-align: center; 34margin-right: 50px; 35} 36button{ 37margin-left: 20px; 38margin-top: 100px; 39zoom: 1.8; 40} 41#result-div{ 42margin-top: 25px; 43zoom: 1.8; 44} 45
音声認識で特定のキーワードを話すと画像が表示されるようにしたいです。プログラミングはまだ不慣れなので色々と調べながら進めているのですが、画像が表示できませんでした。どうしたらいいか教えていただきたいです!
こちらはWebサーバー上で動くものにしたいです。
また、キーワードに含まれていないものは画像を表示せず、会話を自動テキスト化するだけにしたいです。現在すでにテキスト化することの方はできています。
回答1件
あなたの回答
tips
プレビュー