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

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

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

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

Q&A

解決済

1回答

579閲覧

音声合成の後、別の関数を実行する

kimukimu009

総合スコア33

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

0グッド

1クリップ

投稿2018/12/19 03:26

編集2018/12/19 06:28

■やりたいこと
ボタンをクリックすると、各言語の音声合成を行い、読み上げる。
その後、別の関数を実行する。
順序が大切であり、音声合成が終わってから、別の関数を実行したい。
※下記のプロブラムでは、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>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/12/19 04:49

コードはマークダウンのcode機能を利用してください
kimukimu009

2018/12/19 05:18

今から修正可能ですか?
m.ts10806

2018/12/19 05:19

編集ボタンがあるかぎりは、例え解決後であっても何度でも編集可能です。
kimukimu009

2018/12/19 06:29

ありがとうございます。修正しました。
guest

回答1

0

ベストアンサー

javascriptは基本的には関数等の終了を待ちません。
そのため、明示的にコールバックを利用して処理の終了後に実行するというふうに命令する必要があります。

以下のサイト様が詳しいです。
JavaScriptコールバックを整理してみた【再入門】

他にも何かやり方があったような気もしますので、コールバックについて調べてみるととても参考になりますよ

投稿2018/12/19 09:01

mikan_s4n

総合スコア377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kimukimu009

2018/12/19 15:52

ありがとうございます! 勉強になります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問