Improve speak implementation
This commit is contained in:
parent
4be4b56641
commit
1d6f5e6346
|
@ -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();
|
|
|
@ -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(); }
|
|
@ -41,7 +41,5 @@
|
||||||
{{ partialCached "footer" . }}
|
{{ partialCached "footer" . }}
|
||||||
</div>
|
</div>
|
||||||
{{ partialCached "custombodyend" . }}
|
{{ partialCached "custombodyend" . }}
|
||||||
{{ $scripts := resources.Get "js/scripts.js" | minify | fingerprint }}
|
|
||||||
<script src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -6,9 +6,14 @@
|
||||||
<h1 class="p-name post-title">{{ . }}</h1>
|
<h1 class="p-name post-title">{{ . }}</h1>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ if not .Params.nometa }}
|
{{ if not .Params.nometa }}
|
||||||
{{ with partialCached "post_meta" . .RelPermalink }}
|
<div class="post-meta">
|
||||||
<div class="post-meta">{{ . }}</div>
|
{{ partialCached "post_meta" . .RelPermalink }}
|
||||||
{{ end }}
|
{{ 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 }}
|
{{ end }}
|
||||||
</header>
|
</header>
|
||||||
{{ partial "oldcontentwarning" . }}
|
{{ partial "oldcontentwarning" . }}
|
||||||
|
|
|
@ -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 }}
|
{{ T "also_on" }}:{{ $delimiter := "" }}{{ range $index, $link := . }}{{ $delimiter }} <a class="u-syndication" href="{{ $link }}" target="_blank">{{ (urls.Parse $link).Host }}</a>{{ $delimiter = "," }}{{ end }}
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<div id="speakBtn" class="item" style="display: none;"></div>
|
|
||||||
{{ if .IsTranslated }}
|
{{ if .IsTranslated }}
|
||||||
<div class="item">
|
<div class="item">
|
||||||
{{ i18n "translations" }}: {{ $delimiter := "" }}{{ range .Translations }}{{ $delimiter }}<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>{{ $delimiter = ", " }}{{ end }}
|
{{ i18n "translations" }}: {{ $delimiter := "" }}{{ range .Translations }}{{ $delimiter }}<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>{{ $delimiter = ", " }}{{ end }}
|
||||||
|
|
Reference in New Issue