Last active
October 30, 2017 03:26
-
-
Save Kennyl/a22f5074b5a56d6a093bfd6d7be92ce9 to your computer and use it in GitHub Desktop.
SpeechSynthesisUtterance Example for HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // <script src="tts.js"></script> embed in html | |
| // tts_content_tag_id is the ElementID that to be read | |
| // tts_lang is lang of speak | |
| // tts_icon_in_tagname (h1) where is tts icon to place with | |
| // yue is zh-HK | |
| // Mandarin is zh | |
| var tts_content_tag_id = '_tl_editor'; | |
| var tts_lang = 'zh-HK'; | |
| var tts_pitch = 0.7; | |
| var tts_rate = 1.1; | |
| var tts_icon_in_tagname = 'h1'; | |
| var tts = function() { | |
| a = document.createElement('a'); | |
| a.id = 'tts'; | |
| a.innerText = ' ' + String.fromCharCode(55357, 56803); | |
| document.getElementsByTagName(tts_icon_in_tagname)[0].appendChild(a); | |
| document.getElementById('tts').addEventListener('click', speak); | |
| } | |
| function p(){ | |
| speechSynthesis.pause(); | |
| document.getElementById('tts').removeEventListener('click', p); | |
| document.getElementById('tts').addEventListener('click', r); | |
| } | |
| function r(){ | |
| speechSynthesis.resume(); | |
| document.getElementById('tts').removeEventListener('click', r); | |
| document.getElementById('tts').addEventListener('click', p); | |
| } | |
| function speak(text, callback) { | |
| text = document.getElementById(tts_content_tag_id).innerText; | |
| // dialogue = text.split(tts_wordbreak_punctuation); | |
| matches = text.match(/.{1,30000}/mg); | |
| matches.forEach(function(e){ | |
| var t = new SpeechSynthesisUtterance(e); | |
| t.lang = tts_lang; | |
| t.pitch = tts_pitch; | |
| t.rate = tts_rate; | |
| speechSynthesis.speak(t); | |
| // msg = t; | |
| // msg.onstart = function (event) {console.log("started");}; | |
| // msg.onend = function(event) {console.log('Finished in ' + event.elapsedTime + ' seconds.');}; | |
| // msg.onerror = function(event){console.log('Errored ' + event);} | |
| // msg.onpause = function (event){console.log('paused ' + event);} | |
| // msg.onboundary = function (event){console.log('onboundary ' + event);} | |
| }); | |
| // for (var i = 0; i < matches.length; i++) { | |
| // var t = new SpeechSynthesisUtterance(matches[i]); | |
| // console.log(matches[i]); | |
| // t.lang = tts_lang; | |
| // t.pitch = tts_pitch ; | |
| // t.rate = tts_rate ; | |
| // speechSynthesis.speak(t); | |
| // // msg = t ; | |
| // // msg.onstart = function (event) {console.log("started");}; | |
| // // msg.onend = function(event) {console.log('Finished in ' + event.elapsedTime + ' seconds.');}; | |
| // // msg.onerror = function(event){console.log('Errored ' + event);} | |
| // // msg.onpause = function (event){console.log('paused ' + event);} | |
| // // msg.onboundary = function (event){console.log('onboundary ' + event);} | |
| // } | |
| emoji = String.fromCharCode(9199); | |
| document.getElementById('tts').innerHTML = ' ' + emoji; | |
| document.getElementById('tts').removeEventListener('click', speak); | |
| document.getElementById('tts').addEventListener('click', p); | |
| } | |
| document.addEventListener("DOMContentLoaded", tts); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment