■やりたいこと
ボタンをクリックすると、各言語の音声合成を行い、読み上げる。
その後、別の関数を実行する。
順序が大切であり、音声合成が終わってから、別の関数を実行したい。
※下記のプロブラムでは、onlickでの別関数実行としていますが、別の関数
が実行できれば、どのような方法でも大丈夫です。
■できないこと
音声合成プログラムと別の関数が同時に実行されてしまう。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type = "text/javascript"> function functionName() { var select1 = document.forms.formName.selectName1; //変数select1を宣言 var select2 = document.forms.formName.selectName2; //変数select2を宣言 var textin = ''; select2.options.length = 0; // 選択肢の数がそれぞれに異なる場合、これが重要 if (select1.options[select1.selectedIndex].value == "en-US") { select2.options[0] = new Option("I came from America."); textin = 'I came from America.'; } else if (select1.options[select1.selectedIndex].value == "en-GB") { select2.options[0] = new Option("I came from England"); textin = 'I came from England'; } else if (select1.options[select1.selectedIndex].value == "ja-JP") { select2.options[0] = new Option("私は日本から来ました"); textin = '私は日本から来ました'; } document.getElementById('start').innerText = textin; } </script> <script> $(function() { // unsupported. if (!'SpeechSynthesisUtterance' in window) { alert('Speech synthesis(音声合成) APIには未対応です.'); return; } // 発話機能をインスタンス化 var msg = new SpeechSynthesisUtterance(); var voices = window.speechSynthesis.getVoices(); $('#start').on('click',function() { // 以下オプション設定(日本語は効かないもよう。。) msg.voice = voices[7]; // 7:Google 日本人 ja-JP ※他は英語のみ(次項参照) msg.volume = 1.0; // 音量 min 0 ~ max 1 msg.rate = 1.0; // 速度 min 0 ~ max 10 msg.pitch = 1.0; // 音程 min 0 ~ max 2 msg.text = $('#txt').val(); // 喋る内容 msg.lang = $('#language').val(); // en-US or ja-JP // msg.lang = 'ja-JP'; // en-US or ja-JP // msg.lang = 'en-US'; // en-US or ja-JP // 発話実行 speechSynthesis.speak(msg); // 終了時の処理 msg.onend = function (event) { console.log('喋った時間:' + event.elapsedTime + 's'); start() } }); }); </script> <script> function Write() { var textin = ''; textin = 'そうですか'; document.getElementById('soudesuka').innerText = textin; } </script> </head> <body> <form name="formName"> <div class="cp_ipselect cp_sl05"> <select name = "selectName1" id="language" onChange="functionName()"> <option value = "en-US" selected>English(USA)</option> <option value = "en-GB">English(UK)</option> <option value = "ja-JP">日本語</option> </select> </div> <div class="select-box01"> <select id="txt" name = "selectName2"> </select> </div> </form> <button id="start" onclick="Write()"></button><br><br> <textarea id="soudesuka" type="text"></textarea> </body> </html>
回答1件
あなたの回答
tips
プレビュー