Speech Synthesis Demo

index.html

<div id="frame">

<p id="message"></p>

<div class="region">
	<label for="text">Input text</label>
  <textarea name="text" id="text"></textarea>
</div>

<div class="region">
  <input type="radio" name="language" id="ja" value="ja-JP" checked><label for="ja">Japanese</label>
  <input type="radio" name="language" id="en" value="en-US"><label for="en">English</label>
</div>

<div class="region">
  <label for="volume">Volume</label>
  <input type="range" min="0" max="1" step="0.1" name="volume" id="volume" value="1">
</div>

<div class="region">
	<label for="rate">Rate</label>
	<input type="range" min="0.1" max="10" step="0.1" name="rate" id="rate" value="1">
</div>

<div class="region">
	<label for="pitch">Pitch</label>
	<input type="range" min="0" max="2" step="0.1" name="pitch" id="pitch" value="1">
</div>

<div class="region">
  <button id="speech">Say it!!</button>
</div>
</div>

script.js

window.addEventListener('DOMContentLoaded', function(){
  var speech = new Speech();
  speech.init();
}, null);

function Speech(){
  this.textValue = null;
  this.langValue = null;
  this.volumeValue = null;
  this.rateValue = null;
  this.pitchValue = null;
  this.message = document.getElementById('message');
  this.text = document.getElementById("text");
  this.btn = document.getElementById("speech");
  this.support = 'Speech Synthesis is supported!';
  this.unsupported = 'Speech Synthesis is unsupported!';
}

Speech.prototype.init = function(){
  var self = this;
  if ('speechSynthesis' in window) {
    self.message.textContent = self.support;
  } else {
    self.message.textContent = self.unsupported
    self.text.setAttribute('disabled', 'disabled');
    self.btn.setAttribute('disabled', 'disabled');
  }
  self.event();
};
Speech.prototype.getTextValue = function(){
  return this.textValue = this.text.value;
};
Speech.prototype.getLangValue = function(){
  return this.langValue = document.querySelector('input[type=radio]:checked').value;
};
Speech.prototype.getVolumeValue = function(){
  return this.volumeValue = document.getElementById('volume').value;
};
Speech.prototype.getRateValue = function(){
  return this.rateValue = document.getElementById('rate').value;
};
Speech.prototype.getPitchValue = function(){
  return this.pitchValue = document.getElementById('pitch').value;
};
Speech.prototype.setSpeech = function(){
  var msg = new SpeechSynthesisUtterance();
  var text = this.getTextValue();
  var lang = this.getLangValue();
  var volume = this.getVolumeValue();
  var rate = this.getRateValue();
  var pitch = this.getPitchValue();
  msg.volume = volume;
  msg.rate = rate;
  msg.pitch = pitch;
  msg.text = text;
  msg.lang = lang;
  msg.onend = function(event) { alert('Finished in ' + event.elapsedTime + ' seconds.'); };
  window.speechSynthesis.speak(msg);
};
Speech.prototype.event = function(){
  var self = this;
  self.btn.addEventListener('click', function(){ self.setSpeech(); }, null);	
};

Speech-Synthesis-Demo.markdown

Speech Synthesis Demo

This is Speech Synthesis Demo

A Pen by Minoru Hayakawa on CodePen.

License.

style.css

html,
body,
div {
  margin: 0;
  padding: 0;
}


#frame {
  width: 80%;
  margin: 0 auto;
  font-size: 14px;
  padding: 20px 0;
}

.region {
  padding: 20px 0;
  border-top: 1px solid #999;
}

.region:nth-of-type(1) {
  border-top: none;
}

textarea {
  border: 1px solid #ccc;
  width: 100%;
  min-height: 50px;
}

#speech {
  width: 100%;
  border: none;
  height: 50px;
  font-size: 16px;
  color: #fff;
  background-color: #DB5034;
}

#speech[disabled] {
  background-color: #999;
}