Skip to content

Instantly share code, notes, and snippets.

@Dracks
Created April 16, 2015 10:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Dracks/ae3cd4587b15e7636d19 to your computer and use it in GitHub Desktop.
Save Dracks/ae3cd4587b15e7636d19 to your computer and use it in GitHub Desktop.
Chrome Text Voice tests
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js"></script>
<meta charset="utf-8">
<title>Chrome Text Voice</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="speech">
{{view "select" content=languages value=selectedLanguage prompt="select language"}}<br />
{{view "select" content=voicesFiltered
optionLabelPath="content.name"
value=voice
prompt="Select a voice"}}<br />
{{textarea value=text}}<br />
<button {{action "play"}}>Reproduce it</button>
</script>
<script id="jsbin-javascript">
var App=Ember.Application.create({});
App.Router.map(function (){
this.resource('speech', {path: '/'});
});
App.SpeechController= Ember.ObjectController.extend({
text: "",
voice: null,
selectedLanguage: null,
voices:function (){
var self=this;
window.speechSynthesis.onvoiceschanged = function() {
self.set('voices', window.speechSynthesis.getVoices());
};
return window.speechSynthesis.getVoices();
}.property(),
voicesFiltered: function (){
var selectedLanguage=this.get('selectedLanguage');
if (selectedLanguage!=null) {
return this.get('voices').filter(function (e) {
return e.lang==selectedLanguage;
});
} else {
return this.get('voices');
}
}.property('voices', 'selectedLanguage'),
languages: function (){
var r=[];
this.get('voices').forEach(function (e){
if (!r.contains(e.lang)){
r.addObject(e.lang);
}
});
return r.sort();
}.property('voices'),
actions: {
play: function (){
var text=this.get("text");
var voice=this.get('voice');
var msg = new SpeechSynthesisUtterance(text);
msg.rate=1.0;
msg.voice=voice;
speechSynthesis.speak(msg);
}
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"><\/script>
<script src="//builds.emberjs.com/tags/v1.9.0/ember.js"><\/script>
<meta charset="utf-8">
<title>Chrome Text Voice</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="speech">
{{view "select" content=languages value=selectedLanguage prompt="select language"}}<br />
{{view "select" content=voicesFiltered
optionLabelPath="content.name"
value=voice
prompt="Select a voice"}}<br />
{{textarea value=text}}<br />
<button {{action "play"}}>Reproduce it</button>
<\/script>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var App=Ember.Application.create({});
App.Router.map(function (){
this.resource('speech', {path: '/'});
});
App.SpeechController= Ember.ObjectController.extend({
text: "",
voice: null,
selectedLanguage: null,
voices:function (){
var self=this;
window.speechSynthesis.onvoiceschanged = function() {
self.set('voices', window.speechSynthesis.getVoices());
};
return window.speechSynthesis.getVoices();
}.property(),
voicesFiltered: function (){
var selectedLanguage=this.get('selectedLanguage');
if (selectedLanguage!=null) {
return this.get('voices').filter(function (e) {
return e.lang==selectedLanguage;
});
} else {
return this.get('voices');
}
}.property('voices', 'selectedLanguage'),
languages: function (){
var r=[];
this.get('voices').forEach(function (e){
if (!r.contains(e.lang)){
r.addObject(e.lang);
}
});
return r.sort();
}.property('voices'),
actions: {
play: function (){
var text=this.get("text");
var voice=this.get('voice');
var msg = new SpeechSynthesisUtterance(text);
msg.rate=1.0;
msg.voice=voice;
speechSynthesis.speak(msg);
}
}
});</script></body>
</html>
var App=Ember.Application.create({});
App.Router.map(function (){
this.resource('speech', {path: '/'});
});
App.SpeechController= Ember.ObjectController.extend({
text: "",
voice: null,
selectedLanguage: null,
voices:function (){
var self=this;
window.speechSynthesis.onvoiceschanged = function() {
self.set('voices', window.speechSynthesis.getVoices());
};
return window.speechSynthesis.getVoices();
}.property(),
voicesFiltered: function (){
var selectedLanguage=this.get('selectedLanguage');
if (selectedLanguage!=null) {
return this.get('voices').filter(function (e) {
return e.lang==selectedLanguage;
});
} else {
return this.get('voices');
}
}.property('voices', 'selectedLanguage'),
languages: function (){
var r=[];
this.get('voices').forEach(function (e){
if (!r.contains(e.lang)){
r.addObject(e.lang);
}
});
return r.sort();
}.property('voices'),
actions: {
play: function (){
var text=this.get("text");
var voice=this.get('voice');
var msg = new SpeechSynthesisUtterance(text);
msg.rate=1.0;
msg.voice=voice;
speechSynthesis.speak(msg);
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment