Add speak button using SpeachSynthesis API

assets/css/style.scss

@@ -511,6 +511,9 @@ select {
 		&:first-child {
 			margin-left: 0;
 		}
+		&:hover {
+			cursor: pointer;
+		}
 	}
 }
 

assets/js/scripts.js

@@ -0,0 +1,29 @@
+"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();

layouts/_default/baseof.html

@@ -41,5 +41,7 @@
 		{{ 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/partials/post_meta.html

@@ -37,6 +37,7 @@
 	{{ 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 }}