Improve speak implementation

assets/js/scripts.js

@@ -1,29 +0,0 @@
-"use strict";
-
-let synth = window.speechSynthesis;
-
-function initSpeak() {
-    if (synth && document.querySelector('.content')) {
-        document.querySelector('#speakBtn').style.display = '';
-        stopSpeak();
-    }
-}
-
-function speak() {
-    stopSpeak();
-    let voices = synth.getVoices().filter(voice => voice.lang.startsWith(document.querySelector('html').lang));
-    if (voices.length == 0) return;
-    document.querySelector('#speakBtn').innerHTML = "<a onclick=\"stopSpeak()\">Stop speaking!</a>";
-    let utterThis = new SpeechSynthesisUtterance(document.querySelector('.content').textContent);
-    utterThis.voice = voices[0];
-    utterThis.onerror = stopSpeak;
-    utterThis.onend = stopSpeak;
-    synth.speak(utterThis);
-}
-
-function stopSpeak() {
-    synth.cancel();
-    document.querySelector('#speakBtn').innerHTML = "<a onclick=\"speak()\">Read to me, please.</a>";
-}
-
-window.onload = initSpeak();

assets/js/speak.js

@@ -0,0 +1,35 @@
+"use strict";
+
+let synth = window.speechSynthesis;
+let voice;
+if (synth) {
+    voice = synth.getVoices().filter(voice => voice.lang.startsWith(document.querySelector('html').lang))[0];
+}
+
+function initSpeak() {
+    if (voice) {
+        let speakBtn = document.querySelector('#speakBtn');
+        speakBtn.style.display = '';
+        speakBtn.innerHTML = "<a onclick=\"speak()\">Read to me, please.</a>";
+    }
+}
+
+function speak() {
+    console.log("Start speaking")
+    document.querySelector('#speakBtn').innerHTML = "<a onclick=\"stopSpeak()\">Stop speaking!</a>";
+    let textContent = document.querySelector('.content').innerText;
+    let utterThis = new SpeechSynthesisUtterance(textContent);
+    utterThis.voice = voice;
+    utterThis.onerror = stopSpeak;
+    utterThis.onend = stopSpeak;
+    synth.speak(utterThis);
+}
+
+function stopSpeak() {
+    console.log("Stop speaking")
+    synth.cancel();
+    document.querySelector('#speakBtn').innerHTML = "<a onclick=\"speak()\">Read to me, please.</a>";
+}
+
+initSpeak();
+window.onbeforeunload = function () { stopSpeak(); }

layouts/_default/baseof.html

@@ -41,7 +41,5 @@
 		{{ partialCached "footer" . }}
 	</div>
 	{{ partialCached "custombodyend" . }}
-	{{ $scripts := resources.Get "js/scripts.js" | minify | fingerprint }}
-	<script src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>
 </body>
 </html>

layouts/_default/single.html

@@ -6,9 +6,14 @@
 			<h1 class="p-name post-title">{{ . }}</h1>
 			{{ end }}
 			{{ if not .Params.nometa }}
-			{{ with partialCached "post_meta" . .RelPermalink }}
-			<div class="post-meta">{{ . }}</div>
-			{{ end }}
+			<div class="post-meta">
+				{{ partialCached "post_meta" . .RelPermalink }}
+				{{ if (.Param "speak") }}
+				<div id="speakBtn" class="item" style="display: none;"></div>
+				{{ $speakScript := resources.Get "js/speak.js" | minify | fingerprint }}
+				<script defer src="{{ $speakScript.RelPermalink }}" integrity="{{ $speakScript.Data.Integrity }}"></script>
+				{{ end }}
+			</div>
 			{{ end }}
 		</header>
 		{{ partial "oldcontentwarning" . }}

layouts/partials/post_meta.html

@@ -37,7 +37,6 @@
 	{{ T "also_on" }}:{{ $delimiter := "" }}{{ range $index, $link := . }}{{ $delimiter }} <a class="u-syndication" href="{{ $link }}" target="_blank">{{ (urls.Parse $link).Host }}</a>{{ $delimiter = "," }}{{ end }}
 </div>
 {{ end }}
-<div id="speakBtn" class="item" style="display: none;"></div>
 {{ if .IsTranslated }}
 <div class="item">
 	{{ i18n "translations" }}: {{ $delimiter := "" }}{{ range .Translations }}{{ $delimiter }}<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>{{ $delimiter = ", " }}{{ end }}