こんにちは、ともろう(@tomorrowSLog)です。
Web Speech API とJavaScriptを使ってリアルタイム音声文字起こしを実装してみたので備忘録として残しておきます。


リアルタイム音声文字起こし
開発言語
- Javascript(メイン)
- HTML/CSS(必要に応じて)
開発環境
- Macbook Pro
- Chrome
デモンストレーション
注意
PC版Chrome最新版において動作確認をしていますコード全文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!--index.html--> <h1>リアルタイム音声文字起こし</h1> <p>Click to Speakでリアルタイム文字起こしを開始します</p> <p>確定した文字列を黒色、不確定な文字列を灰色で表しています</p> <p>Click to Stopでリアルタイム文字起こしを終了します</p> <button id="button" onclick="toggleStartStop()"></button> <div style="border:dotted;padding:10px"> <span id="final_span"></span> <span id="interim_span" style="color:grey"></span> </div> <script type="text/javascript"> var recognizing; var recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; reset(); recognition.onend = reset; recognition.onresult = function (event) { var final = ""; var interim = ""; for (var i = 0; i < event.results.length; ++i) { if (event.results[i].isFinal) { final += event.results[i][0].transcript; } else { interim += event.results[i][0].transcript; } } final_span.innerHTML = final; interim_span.innerHTML = interim; } function reset() { recognizing = false; button.innerHTML = "Click to Speak"; } function toggleStartStop() { if (recognizing) { recognition.stop(); reset(); } else { recognition.start(); recognizing = true; button.innerHTML = "Click to Stop"; final_span.innerHTML = ""; interim_span.innerHTML = ""; } } </script> |
コメントを残す