読上時計サンプルコードのエラー内容を教えてください

次のページをiOSで表示するとJavaScript実行中にエラーとなるようでコードが走りません。エラーメッセージを見られる方、内容を教えていただけないでしょうか。(MacかLinuxかWindows10があればWeb Inspectorでエラーメッセージを確認できるようですが、本件の為だけに導入するわけにはいかないのです)

該当のソースコード

html
1<!DOCTYPE html>
2<head>
3	<meta charset="utf-8">
4	<title>x117</title>
5<script>
6window.onload = function(){
7	window.onbeforeunload = function(){
8		speechSynthesis.cancel();
9  }
10}
11</script>
12</head>
13<body>
14読上時計 - <span id="rcstat"></span><br>
15<button id="start-btn">開始</button>
16<button id="stop-btn">停止</button>
17<hr>
18設定
19<pre>
20間隔：<select id="term">
21<option value="10">10秒</option>
22<option value="300">5分</option>
23</select>
24　声：<select id="voice-select"></select>
25</pre>
26<pre>
27pitch <input type="range" id="sld_pitch" value="1.0" min="0.0" max="2.0" step="0.1"  style="width:300px"onchange="ValSetp()"><span id="vpitch"></span>
28rate  <input type="range" id="sld_rate" value="1.0" min="0.1" max="10.0" step="0.1"  style="width:300px"onchange="ValSetr()"><span id="vrate"></span>
29volume<input type="range" id="sld_volume" value="1.0" min="0.0" max="1.0" step="0.05"  style="width:300px"onchange="ValSetv()"><span id="vvolume"></span>
30</pre>
31<hr>
32<div style="background-color:#FED;">
33Debug
34<hr style="border-top: 1px dotted; border-bottom: 0px;">
35SpeechSynthesis API 対応確認
36<pre><script>
37  if ('speechSynthesis' in window) {
38    document.write("。")
39  } else {
40    document.write("このブラウザは音声合成に対応していません。")
41  }
42</script></pre>
43<hr style="border: 1px dotted #ddf;">
44<pre>
45MainLoop / uttrsetting
46実行時刻
47<span id="nowtime"></span>
48次回読上開始可能時刻
49<span id="utterabletime"></span>
50次回読上
51<span id="utterstrtime"></span>
52<textarea id="utext">
53アドベントカレンダーは、クリスマスまでの日数を数えるためのカレンダー。
54</textarea></pre>
55発話テスト ※モバイルOSでは一度はユーザが操作しないと音が出ない？<br>
56<button id="speak-btn">再生</button>
57<button id="cancel-btn">停止</button>
58<hr style="border: 1px dotted #ddf;">
59SpeechSynthesis - property<br>
60取得時刻：<span id="ssptime"></span>
61<pre id="ssp"></pre>
62<hr style="border: 1px dotted #ddf;">
63SpeechSynthesisUtterance - event<br>
64start時刻 / startからの経過時刻[秒・ms]
65<pre>
66start:<span id="ssues">-</span>
67  end:<span id="ssuee">-</span>
68error:<span id="ssueerr">-</span>
69</pre>
70</div>
71<script>
72function date2str(et) {
73	//et: elapsed time from unix epoch
74	return new Date(et).toDateString()
75		+ " " + new Date(et).toTimeString();
76}
77
78function fgetssp() {
79  bufstr = '.paused: ' + speechSynthesis.paused +'\n';
80  bufstr += '.pending: ' + speechSynthesis.pending +'\n';
81  bufstr += '.speaking: ' + speechSynthesis.speaking +'\n';
82  document.getElementById('ssp').textContent = bufstr;
83
84	//showtime
85	document.getElementById('ssptime').textContent = date2str(Date.now());
86
87  setTimeout(fgetssp, 750);
88}
89
90fgetssp();
91</script>
92<hr>
93<xmp>
94参考・引用・流用元
95
96https://mogya.com/2012/01/windows7text_to_speech.html
97Windows7で音声合成(Text to speech) – もぎゃんらんど
98
99http://www.neko.ne.jp/~freewing/software/ms_sapi_tts/
100日本語や中国語等の音声合成(SAPI TTS)を無料で使う方法 (Speech Platform Server Runtimeを裏技で SAPI 5.1として動作させる方法)
101
102http://www.createsystem.co.jp/DTalkerSapi1.html
103製品情報 ドキュメントトーカ 日本語音声合成エンジン for Windows
104ドキュメントトーカ 日本語音声合成エンジンは、Microsoft社のSpeech API Ver４(SAPI4)及び Ver５(SAPI5) に対応した音声合成エンジンです。
105┃
106┗ドキュメントトーカ　Plus V２．１
107　AquesTalkを、ドキュメントトーカ日本語音声合成エンジン（AquesTalk版）として、フリーで提供
108
109https://qiita.com/hmmrjn/items/be29c62ba4e4a02d305c
110Webページでブラウザの音声合成機能を使おう - Web Speech API Speech Synthesis - Qiita
111┃　主にこちらから
112┣https://codepen.io/rodhamjun/pen/BGvrqr
113┃Web Speech API SpeechSynthesis Demo by rodhamjun = hmmrjn
114┃　完成度の高いサンプル
115┣https://jsfiddle.net/hmmrjn/o68vgqh0/1/
116┃対応確認
117┃
118┗https://jsfiddle.net/hmmrjn/u1y4aL9v/
119　再生停止一時停止再開
120
121https://www.nict.go.jp/JST/JST5.html
122https://www.javadrive.jp/javascript/date_class/index1.html
123https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date
124https://web-designer.cman.jp/html_ref/abc_list/input_range/
125https://w3c.github.io/speech-api/speechapi.html#speechsynthesisevent
126https://app.codegrid.net/entry/2016-web-speech-api-1
127Web Speech APIの実装 - Speech Synthesis API | CodeGrid
128　一時停止状態で画面をリロードすると音が出なくなる
129https://coliss.com/articles/build-websites/operation/css/css-snippets-for-horizontal-rules.html
130http://www.htmq.com/html/select.shtml
131https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10102376495
132https://www.google.com/search?q=ScriptProcessor
133</xmp>
134<script>
135function ValSetp(){
136	document.getElementById("vpitch").innerHTML=document.getElementById("sld_pitch").value;
137}
138function ValSetr(){
139	document.getElementById("vrate").innerHTML=document.getElementById("sld_rate").value;
140}
141function ValSetv(){
142	document.getElementById("vvolume").innerHTML=document.getElementById("sld_volume").value;
143}
144ValSetp();
145ValSetr();
146ValSetv();
147
148  const utext      = document.querySelector('#utext')
149  const voiceSelect = document.querySelector('#voice-select')
150  const speakBtn  = document.querySelector('#speak-btn')
151  const cancelBtn = document.querySelector('#cancel-btn')
152  // selectタグの中身を声の名前が入ったoptionタグで埋める
153  function appendVoices() {
154    // ①　使える声の配列を取得
155    // 配列の中身は SpeechSynthesisVoice オブジェクト
156    const voices = speechSynthesis.getVoices()
157    voiceSelect.innerHTML = ''
158//    voices.forEach(function(voice) { //ES6非使用版
159    voices.forEach(voice => { //　アロー関数 (ES6)
160      // 日本語と英語以外の声は選択肢に追加しない。
161      if(!voice.lang.match('ja|en-US')) return
162      const option = document.createElement('option')
163      option.value = voice.name
164//      option.text  = voice.name +'(' + voice.lang +')' //ES6非使用版
165      option.text  = `${voice.name} (${voice.lang})` //　テンプレートリテラル (ES6)
166      option.setAttribute('selected', voice.default)
167      voiceSelect.appendChild(option)
168    });
169  }
170
171  appendVoices();
172
173  // ② 使える声が追加されたときに着火するイベントハンドラ。
174  // Chrome は非同期に(一個ずつ)声を読み込むため必要。
175  speechSynthesis.onvoiceschanged = e => {
176    appendVoices()
177  }
178	
179	function utter() {
180    // 発言を作成
181    const uttr = new SpeechSynthesisUtterance(utext.value)
182		
183    // ③ 選択された声を指定
184    uttr.voice = speechSynthesis
185      .getVoices()
186      .filter(voice => voice.name === voiceSelect.value)[0]
187		// 音程・速さ・音量を設定
188		uttr.pitch = document.getElementById("sld_pitch").value
189		uttr.rate  = document.getElementById("sld_rate").value
190		uttr.volume = document.getElementById("sld_volume").value
191		//イベント設定 debug/
192		uttr.onstart = function(event) { document.getElementById('ssues').textContent = date2str(Date.now()); }
193		uttr.onend = function(event) { document.getElementById('ssuee').textContent = event.elapsedTime; }
194		uttr.onerror = function(event) { document.getElementById('ssueerr').textContent = event.elapsedTime; }
195		// /debug
196
197    // 発言を再生 (発言キュー発言に追加)
198    speechSynthesis.speak(uttr)
199  }
200  speakBtn.addEventListener('click', function() {
201    utter()
202  })
203  cancelBtn.addEventListener('click', function() {
204    // 再生停止 (発言キューをクリアして止まる)
205    speechSynthesis.cancel()
206  })
207</script>
208<script>
209  const startBtn  = document.querySelector('#start-btn')
210  const stopBtn = document.querySelector('#stop-btn')
211	const rcstatNamedTag = document.getElementById('rcstat')
212	
213	let state_run = false;
214	let offset, utterterm;
215	let et_now, et_utterstr, et_utterable = 0;
216	
217	function uttrsetting() {
218		let str, nmin, nsec;
219
220		offset = 0; //[ms] 発話開始を前倒し（0ならその時刻になってから発話することになる）
221		utterterm = 1000 * document.getElementById("term").value;
222	
223		et_now = Date.now(); //elapsed time from unix epoch
224		// 発話内容の時刻
225		et_utterstr = utterterm * Math.ceil((et_now + offset) / utterterm);
226		// 発話開始時刻
227		et_utterable = et_utterstr - offset;
228	// dbg
229	document.getElementById("nowtime").textContent = et_now
230		+ " " + date2str(et_now);
231	document.getElementById("utterabletime").textContent = et_utterable
232		+ " " + date2str(et_utterable);
233	document.getElementById("utterstrtime").textContent = et_utterstr
234		+ " " + date2str(et_utterstr);
235		
236		//発話文生成
237		d = new Date(et_utterstr);
238		nmin = d.getMinutes();
239		nsec = d.getSeconds();
240		str = d.getHours() + "時";
241		if (!((nmin == 0) && (nsec == 0))) {
242			str += nmin + "分";
243		}
244		if (nsec != 0) {
245			str+= nsec + "秒";
246		}
247		str += "です。";
248		utext.value = str;
249	}
250	//uttrsetting(); // dbg
251
252	function uhrMainLoop() {
253		et_now = Date.now();
254		// dbg
255		document.getElementById("nowtime").textContent = et_now
256			+ " " + date2str(et_now);
257
258		if (et_utterable <= et_now) {
259			speechSynthesis.cancel();
260			utter();
261			uttrsetting();
262		}
263
264		if (state_run) {
265			setTimeout(uhrMainLoop, 1000);
266		} else {
267			rcstatNamedTag.textContent = "停止中";
268		}
269	}
270
271  startBtn.addEventListener('click', function() {
272		state_run = true;
273		rcstatNamedTag.textContent = "作動中";
274		uttrsetting();
275    uhrMainLoop()
276  })
277  stopBtn.addEventListener('click', function() {
278    state_run = false;
279  })
280</script>
281
282</body>
283</html>

試したこと

document.write文挿入と</script><script>行の挿入による不動作となるコード範囲の限定で、149行～169行、
const voiceSelect = document.querySelector('#voice-select')
からappendVoices関数の終わりまでに問題があることは分かりました。

補足情報

Windows 7 + Firefox では動作します。
iPad & iOS 10.3では動きません。

　Safari, Firefox, Edge(Windows機上のsHTTPd(悪魔猫将軍さんのほう)で配信)、Documentsアプリ内ブラウザ(smb経由で取得したファイルをWebView?で表示)いずれも同様です。

行動規範の内容に同意します

回答1件

ベストアンサー

やや古い情報ではありますが、こちらが参考になるかと思います。
[http://stfstfstf.blogspot.com/2013/06/iphoneconsolelog.html]

＜以下引用＞
１．お手軽な方法

windowのonerrorイベントを拾って、エラーの内容をそのままalert表示してしまうという解決方法。
下記の三行を追加するだけで実装できる。

window.onerror = function(error) {
alert(error);
};

投稿2019/06/29 06:29

退会済みユーザー

総合スコア0

cwi

2019/06/29 09:50

ありがとうございます。おかげさまでエラー内容を取得できました。特に問題となっていたのは以下でした。 SyntaxError: Can't crate duplicate variable that shadows a global property: 'utext' iOSのSafariでは変数名とidが同じであってはならないとのことでしたので、名前を変更しました。これで動くようになりました。エラーはもう一つあり、以下でした。 TypeError: undefined is not an object (evaluating 'document.getElementsByTagName("div")[1].innerHTML') こちらは意味・原因が分からず継続調査中です。（divタグを取り除いても解消しない）

行動規範の内容に同意します