Skip to content

Instantly share code, notes, and snippets.

@e-river
Created January 6, 2015 10:23
Show Gist options
  • Save e-river/6b771e2020f8fad34b59 to your computer and use it in GitHub Desktop.
Save e-river/6b771e2020f8fad34b59 to your computer and use it in GitHub Desktop.
Speech Synthesis Demo
<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>
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);
};
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment