nodebugv2.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/font-awesome.min.css">
  <script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery-ui.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.css">
<style>

.notepad {
  font-size: 21px !important;
  height: 450px;
  margin: 2pt auto;
  padding: 6pt 5pt 4pt 40pt;
  position: relative;
  color: #444;
  overflow: auto;
  line-height: 1.5 !important;
  border: 1px solid #d2d2d2;
  background: #fff;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
  background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  -webkit-background-size: 100% 32px;
  -moz-background-size: 100% 32px;
  -ms-background-size: 100% 32px;
  -o-background-size: 100% 32px;
  background-size: 100% 32px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}

.notepad::before {
  content: '';
  position: absolute;
  width: 4pt;
  top: 0;
  left: 30pt;
  bottom: 0;
  border: 1px solid;
  border-color: transparent #efe4e4;
}

.notepad .page p {
    font-size: 21px !important;
    margin: 0 0;
}

.notepad .page p:before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-bottom: 3px;
  margin-right: 5px;
  margin-left: 1px;
}

.notepad .page p.recognizing:before {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background-color: #EF7575;
}

.notepad .page p span.recognizing {
  font-weight: bold;
  color: #666;
  background-color: #fffafa;
}

.recorder button {
    width: 40px;
    height: 40px;
}

.recorder button i {
  vertical-align: middle;
  font-size: 18px;
}

.recorder button.active {
    color: #f05f5a;
}

.recorder button.active:disabled {
    color: #F0A8A6;
}

#record-button {
  float: right;
}

#clear-button {
}

.kill {
display: none;
}

#purge-button {

color:red;
}
#voice {
background-color: #ECECEC;
width: 22%;
font-style: oblique;
height: 40px;
font-weight: 633;
transition-duration: 4s;
transition-timing-function: ease-out;
}

#voice:hover {
background-color: #ECECEC;
width: 32%;
font-style: oblique;
height: 40px;
font-weight: 633;
transition-duration: 4s;
transition-timing-function: ease-out;
}
</style>
</head>
<body>
<div class="recorder">
    <div id="notepad" class="notepad">
        <div id="notepad-page" class="page"></div>
    </div>
    <button class="active" id="interim-button" onclick="onInterimButtonClicked()">
        <i class="fa fa-exchange" aria-hidden="true"></i>
    </button>
    <button id="clear-button" onclick="onClearButtonClicked()">
        <i class="fa fa-eraser" aria-hidden="true"></i>
    </button>
    <button id="record-button" onclick="onRecordButtonClicked()">
        <i class="fa fa-microphone" aria-hidden="true"></i>
    </button>
        <button id="purge-button" onclick="onPurgeButtonClicked()">
        <i class="fa fa-eraser" aria-hidden="true"></i>
    </button>
        <button id="play-button">
        <i class="fa fa-play" aria-hidden="true"></i>
    </button>

    <label style="display=none;" class="kill">Volume
        <input type="number" id="volume" value="1"></input>
    </label>

    <label style="display=none;" class="kill">Rate
        <input type="number" id="rate" value="1"></input>
    </label>


    <label style="display=none;" class="kill">Pitch
        <input type="number" id="pitch" value="1"></input>
    </label>

    <label>
        <select id="voice"></select>
    </label>
</div>

<div id="dialog" title="Hi">
  <p>You can begin to record now, please close me.</p>
</div>

<div id="dialog2" title="Hi">
  <p>You've stopped to record, you're free to play, delete (grey eraser), or purge your work (red eraser).</p>
</div>

 <script type="text/javascript">


   $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );

 </script>

 <script type="text/javascript">


   $( function() {
    $( "#dialog2" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog2" ).dialog( "open" );
    });
  } );

 </script>

<script type="text/javascript">

var recognizing = false
var recognition = new webkitSpeechRecognition();
recognition.continuous = true
recognition.interimResults = true

var sentenceEl = null

recognition.onstart = function() {
    sentenceEl = document.createElement("p")
    sentenceEl.classList.add("recognizing")
    document.getElementById("notepad-page").appendChild(sentenceEl)
    document.getElementById("interim-button").disabled = true
    document.getElementById("clear-button").disabled = true
    document.getElementById("record-button").classList.add("active")
    document.getElementById("record-button").disabled = false

        recognition.lang = "en-US";
        recognition.start();
        recognizing = true;
}

recognition.onresult = function (event) {
    sentenceEl.innerHTML = ""
    for (var i = event.resultIndex; i < event.results.length; ++i) {
        var result = event.results[i]
        var el = document.createElement("span")
        el.textContent = result[0].transcript
        sentenceEl.appendChild(el)
        el.classList.add(result.isFinal ? "recognized" : "recognizing")
    }
}

recognition.onerror = function(event) {
    alert(event.error)
}

recognition.onend = function() {
    recognizing = false
    if (sentenceEl) if (sentenceEl.hasChildNodes()) {
        sentenceEl.classList.remove("recognizing")
        sentenceEl.classList.add("recognized")

    } else {
        sentenceEl.parentElement.removeChild(sentenceEl)
    }
    document.getElementById("record-button").classList.remove("active")
    document.getElementById("record-button").disabled = false
    document.getElementById("clear-button").disabled = false
    document.getElementById("interim-button").disabled = false
}

function onInterimButtonClicked() {
    recognition.interimResults = !recognition.interimResults
    var button = document.getElementById("interim-button")
    if (recognition.interimResults) {
        button.classList.add("active")
    } else {
        button.classList.remove("active")

    }
}

function onClearButtonClicked() {
    var pageEl = document.getElementById("notepad-page")
    while (pageEl.hasChildNodes()) {
        pageEl.removeChild(pageEl.firstChild)
    }
}


function onPurgeButtonClicked() {
    var pageEl = document.getElementById("notepad-page")
    pageEl.innerHTML = ''
}


function onRecordButtonClicked() {
    document.getElementById("record-button").disabled = true
    if (recognizing) {
        recognition.stop();


    } else {
        recognition.lang = "en-US";
        recognition.start();
        recognizing = true;

    }
}
document.addEventListener('DOMContentLoaded', function() {
onRecordButtonClicked();

}, false);
</script>
<script>
var message = new SpeechSynthesisUtterance($("#notepad").text());
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()];
});

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


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);
</script>

</body>


</html>