Text to Speech Demo

by Nakul Kundra

HTML

<p>
    <label>Message
        <input type="text" id="text" value="Your package has been recorded.">
<p>
    <label>Volume
        <input type="number" id="volume" value="1">
<p>

</p>
    <label>Rate
        <input type="number" id="rate" value="1">

<p>
    <label>Pitch
        <input type="number" id="pitch" value="1">
    </label>
</p>
<p>
    <label>Voice
        <select id="voice"></select>
    </label>
</p>
<p>
    <button type="button">Speak!</button>
</p>

JavaScript

var message = new SpeechSynthesisUtterance($("#text").val());
var voices = speechSynthesis.getVoices();

$("input").on("change", function () {
    console.log($(this).attr("id"), $(this).val());
    message[$(this).attr("id")] = $(this).val();
});

$("select").on("change", function () {
    message.voice = voices[$(this).val()];
});

$("button").on("click", function () {
    speechSynthesis.speak(message);
});

// Hack around voices bug
var interval = setInterval(function () {
    voices = speechSynthesis.getVoices();
    if (voices.length) clearInterval(interval); else return;

    for (var i = 0; i < voices.length; i++) {
        $("select").append("<option value=\"" + i + "\">" + voices[i].name + "</option>");
    }
}, 10);