Myu: ESP32にマイクとアンプは、負荷が高く断念

esp32C3のハードの能力ではデジタルで音声処理は難しそうで、せっかくの部品購入ではありましたが、諦めて、別の方法に切り替えました。esp32はテキスト処理にとどめておいたほうがい無難なようです。目的は音声認識英英辞典だったので、GithubPagesに、Javascriptでこちらにサイトをつくってみました。スマホなどからアクセスすると便利に使えそうです。

最初からこの方法を思いついていれば、わざわざesp32で難しいことしなくても、実現できたのですが、、、。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Voice Dict</title>
    <style>
        body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: #f0f2f5; font-family: sans-serif; text-align: center; }
        #btn,#repeat { width: 200px; height: 200px; border-radius: 50%; border: 8px solid #fff; background: #007bff; color: white; font-size: 22px; font-weight: bold; cursor: pointer; box-shadow: 0 8px 15px rgba(0,0,0,0.1); transition: 0.2s; -webkit-tap-highlight-color: transparent; }
        #btn:active { transform: scale(0.9); background: #0056b3; }
        #status { margin-top: 15px; color: #666; font-size: 14px; height: 20px; }
        #result-box { margin: 20px; padding: 20px; background: white; border-radius: 15px; width: 85%; max-width: 500px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); min-height: 120px; }
        #word-text { font-size: 26px; color: #333; margin-bottom: 10px; font-weight: bold; text-transform: capitalize; }
        #def-text { font-size: 17px; color: #555; line-height: 1.6; text-align: left; }
    </style>
</head>
<body>

<button id="btn">PUSH & SPEAK</button>
    <div id="status">Ready</div>

<div id="result-box">
        <div id="word-text">English Dictionary</div>
        <div id="def-text">Tap the button and say a word. (e.g., "Apple")</div>
        <button id="repeat">Repeat</button>
    </div>

// 音声認識の設定
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        const recognition = new SpeechRecognition();
        recognition.lang = 'en-US';
        recognition.interimResults = false;

btn.onclick = () => {
            window.speechSynthesis.cancel(); // 再生中の音声を停止
            try {
                recognition.start();
                status.innerText = "Listening...";
                btn.style.background = "#ff4757";
            } catch (e) {
                console.log("Recognition already started");
            }
        };
        
         repeat.onclick = () => {
             speak(word + ". " + meaning);
        };

recognition.onresult = async (event) => {
            word = event.results[0][0].transcript.toLowerCase().trim();
            wordText.innerText = word;
            defText.innerText = "Searching...";
            btn.style.background = "#007bff";

try {
                //const res = await fetch(`https://dictionaryapi.dev{word}`);
                const res = await fetch('https://api.dictionaryapi.dev/api/v2/entries/en/' + word);
                
                const data = await res.json();
                 //speak("Under analysis");
                
                // APIが配列で返ってこない（エラー）場合
                if (!Array.isArray(data) || data.length === 0) {
                    const msg = "Sorry, no definition found for " + word;
                    defText.innerText = msg;
                    speak(msg);
                } else {
                    // ★重要：階層を安全にたどる
                    meaning = data[0].meanings[0].definitions[0].definition;
                    defText.innerText = meaning;
                    speak(word + ". " + meaning);
                }
            } catch (e) {
                defText.innerText = "Error: Check your internet connection.";
                speak("Connection error.");
            }
            status.innerText = "Done";
        };

recognition.onend = () => {
            btn.style.background = "#007bff";
            if (status.innerText === "Listening...") status.innerText = "Ready";
        };

function speak(text) {
            const uttr = new SpeechSynthesisUtterance(text);
            uttr.lang = 'en-US';
            uttr.rate = 0.9;
            window.speechSynthesis.speak(uttr);
        }
    </script>
</body>
</html>

Myu

2026年3月17日火曜日

ESP32にマイクとアンプは、負荷が高く断念

0 件のコメント:

コメントを投稿

ブログアーカイブ