vocoder

index.html

<div id='bodybox'>
  <select id = 'language'>
  <option value="en-GB">GB</option>
  <option value="en-US">US</option>
  <option value="en-AU">AU</option>
  <option value="fr-FR">FR</option>
  <option value="de-DE">DE</option>
  <option value="en-IN">IN</option>
  <option value="zh-CN">CN</option>
  <option value="pl">PL</option>
  <option value="ru">RU</option>
  <option value="sv-SE">SE</option>
  <option value="en-ZA">ZA</option>
</select>
  <div id='chatborder'>
    <p id="chatlog7" class="chatlog">&nbsp;</p>
    <p id="chatlog6" class="chatlog">&nbsp;</p>
    <p id="chatlog5" class="chatlog">&nbsp;</p>
    <p id="chatlog4" class="chatlog">&nbsp;</p>
    <p id="chatlog3" class="chatlog">&nbsp;</p>
    <p id="chatlog2" class="chatlog">&nbsp;</p>
    <p id="chatlog1" class="chatlog">&nbsp;</p>
    <input type="text" name="chat" id="chatbox">
  </div>
</div>

script.js

var messages = [], //array that hold the record of each string in chat
  lastUserMessage = "", //keeps track of the most recent input string from the user
  talking = true; //when false the speach function doesn't work


//this runs each time enter is pressed.
//It controls the overall input and output
function newEntry() {
  //if the message from the user isn't empty then run 
  if (document.getElementById("chatbox").value != "") {
    //pulls the value from the chatbox ands sets it to lastUserMessage
    lastUserMessage = document.getElementById("chatbox").value;
    //sets the chat box to be clear
    document.getElementById("chatbox").value = "";
    //adds the value of the chatbox to the array messages
    messages.push(lastUserMessage);
    Speech(lastUserMessage);
    //outputs the last few array elements of messages to html
    for (var i = 1; i < 8; i++) {
      if (messages[messages.length - i])
        document.getElementById("chatlog" + i).innerHTML = messages[messages.length - i];
    }
  }
}

//text to Speech
//https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API
function Speech(say) {
  if ('speechSynthesis' in window && talking) {
    var utterance = new SpeechSynthesisUtterance(say);
    //msg.voice = voices[10]; // Note: some voices don't support altering params
    //msg.voiceURI = 'native';
    //utterance.volume = 1; // 0 to 1
    //utterance.rate = 1; // 0.1 to 10
    //utterance.pitch = 1; //0 to 2
    //utterance.text = 'Hello World';
    //http://stackoverflow.com/questions/14257598/what-are-language-codes-for-voice-recognition-languages-in-chromes-implementati
    //de-DE  en-GB  fr-FR  en-US
    utterance.lang = document.getElementById("language").value;
    speechSynthesis.speak(utterance);
  }
}
document.onkeypress = keyPress;
//if the key pressed is 'enter' runs the function newEntry()
var keys = [];
var rememberPosition = 0;
document.onkeydown = function(e) {
  keys[e.keyCode] = true;
  if (keys[38] && messages) { 
    if (messages.length >rememberPosition){ rememberPosition++;
    document.getElementById("chatbox").value = messages[messages.length-rememberPosition];}
  }
    if (keys[40] && messages) { 
      if (rememberPosition > 1) {rememberPosition--;
      document.getElementById("chatbox").value = messages[messages.length-rememberPosition];}
  }
}
document.onkeyup = function(e) {
  keys[e.keyCode] = false;
}

function keyPress(e) {
  var x = e || window.event;
  var key = (x.keyCode || x.which);
  if (key == 13 || key == 3) { //runs this function when enter is pressed
    rememberPosition = 0
    newEntry();
  }  
}

style.css

body {
  background-color: #d9d9d9;
  padding-top: 15px;
  padding-bottom: 15px;
}

select {
  border: 0;
  border-radius: 15px;
  position: absolute;
  bottom: 3px;
  right: 3px;
}

#bodybox {
  margin: auto;
  max-width: 550px;
  background-color: white;
  padding: 25px;
  box-shadow: 5px 5px 5px grey;
  border-radius: 15px;
}

#chatborder {
  border-style: solid;
  border-color: #555;
  border-width: 3px;
  border-radius: 15px;
  background-color: #f6f9f6;
  margin: 30px;
  padding-top: 10px;
  padding-bottom: 20px;
  padding-right: 20px;
  padding-left: 15px;
 
}

.chatlog {
  font: 15px arial, sans-serif;
}

#chatbox {
  font: 17px arial, sans-serif;
  height: 22px;
  width: 100%;
}

@media only screen and (max-width: 550px) {
  #bodybox {
    padding: 5px;
  }
  body {
    padding-top: 0px;
  }
  #chatborder {
    margin: 15px;
  }
  #chatlog7 {
    display: none;
  }
  #chatlog6 {
    display: none;
  }
}

vocoder.markdown

vocoder

A Pen by Landgreen on CodePen.

License.