Explained
Okay, so I mentioned that you learn how to use SpeechSynthesis
, you said that you feel that you're not strong enough as a programmer to implement an application that utilises this feature. Between the documentation that you can find on MDN and this demonstration that I'm about to show you, you should be able to implement such a feature without too much trouble.
I suggest that you try to avoid using libraries that do very simple features, aka act as a wrapper around the native technology, it prevents you from learning the underlying technology. I mean by all means, use them as a starting point, but I suggest that you learnt the native approach at a later date, this will help you progress as a developer, at least that's my opinion.
Demo
With this demo, I've pretty much copied & pasted code that can be found on MDN.
The only differences with my code and the code that can be found on MDN is the fact that I'm using "use strict;"
and a immediately invoked invoked function. In which case I'd usggest that you read more about strict mode and IIFE.
// A simple IIFE function.
(function() {
"use strict"; // For the sake of practice.
if (typeof speechSynthesis === 'undefined')
return;
// Some config stuffs...
var voiceSelect = document.getElementById("voiceSelect");
var myPhrase = 'Hello World!';
var voices = [];
// This is essentially similar to jQuery's $.ready.
var ready = function(callback) {
var d = document, s = d.readyState;
// DOMContentLoaded was fired
if (s == "complete" || s == "loaded" || s == "interactive") {
callback();
} else {
if (d.addEventListener) {
d.addEventListener("DOMContentLoaded", callback, false);
} else {
d.attachEvent("onDOMContentLoaded", callback);
}
}
};
// This is a function to display all possible voice options.
function populateVoiceList() {
voices = speechSynthesis.getVoices();
for (var i = 0; i < voices.length; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
option.textContent += voices[i].default ? ' -- DEFAULT' : '';
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
document.getElementById("voiceSelect").appendChild(option);
}
}
// This is the handler for when the select tag is changed.
function handler() {
var utterThis = new SpeechSynthesisUtterance(myPhrase);
var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for (var i = 0; i < voices.length; i++) {
if (voices[i].name === selectedOption) {
utterThis.voice = voices[i];
}
}
speechSynthesis.speak(utterThis);
};
// This is your code to get the selected text.
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
// for Internet Explorer 8 and below. For Blogger, you should use && instead of &&.
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
// This is the on mouse up event, no need for jQuery to do this.
document.onmouseup = function(e) {
setTimeout(function() {
speechSynthesis.cancel();
myPhrase = getSelectionText();
handler();
}, 1);
};
// Some place for the application to start.
function start() {
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined)
speechSynthesis.onvoiceschanged = populateVoiceList;
voiceSelect.onchange = handler;
setTimeout(handler, 75);
}
// Run the start function.
ready(start);
})();
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices -->
<hr/>
<select id="voiceSelect"></select>
<hr/>
<p>Testing... Testing... One Two Three... Testing</p>
<p>I like big butts and I can not lie, you other brothers can't deny!</p>
PS
I hope that this has helped you in some way or another, all the best! :)
SpeechSynthesis
in a more native fashion?