Has anyone tried using the Javascript Text to speech library Talkify to create a button that allows visitors to read the current page out loud? Had a look at the Github page but as I'm not too familiar with Javascript yet I'm not sure how to install / implement it in Umbraco. My site is on Azure and I'm using Visual Studio to develop it locally so I can't use NPM or Bower to install.
talkify.config = {
remoteService: {
host : 'https://talkify.net',
apiKey = 'your-api-key',
active: true //True to use Talkifys language engine and hosted voices. False only works for Html5Player.
},
ui:
{
audioControls: { //If enabled, replaces the built in audio controls. Especially good for the Web Speech API bits
enabled: false,
container: document.body
}
}
}
Write some code that uses a player:
var player = new talkify.TtsPlayer().enableTextHighlighting();
new talkify.playlist()
.begin()
.usingPlayer(player)
.withTextInteraction()
.withElements(document.querySelectorAll('p')) //<--Any element you'd like. Leave blank to let Talkify make a good guess
.build() //<-- Returns an instance.
.play();
Yes, that's what is in their documentation and I tried that initially but the config section threw errors when I tried to use it. After looking at the jsfiddle code that the documentation has a link to, and emailing Talkify themselves, I ended up with the following working code:
<script type="text/javascript">
talkify.config.remoteService.host = 'https://talkify.net';
talkify.config.remoteService.apiKey = 'my-key';
talkify.config.ui.audioControls = {
enabled: false, //<-- Disable to get the browser built in audio controls
container: document.getElementById("player-and-voices")
};
document.getElementById("talkifyButton").onclick = function () {
var player = new talkify.TtsPlayer();
new talkify.playlist()
.begin()
.usingPlayer(player)
.withTextInteraction()
.withElements(document.querySelectorAll(".readMe")) //<--Any element you'd like. Leave blank to let Talkify make a good guess
.withRootSelector('body')
.build() //<-- Returns an instance.
.play();
}
</script>
I took out the text highlighting because that stripped out the styling from whichever piece of text was being read. So that I could decide exactly which bits of the page to read I added a .readMe class to the relevant elements and used that in the withElements parameter.
Hope that's useful to anyone else trying to do this.
Implementing Talkify in Umbraco
Hi,
Has anyone tried using the Javascript Text to speech library Talkify to create a button that allows visitors to read the current page out loud? Had a look at the Github page but as I'm not too familiar with Javascript yet I'm not sure how to install / implement it in Umbraco. My site is on Azure and I'm using Visual Studio to develop it locally so I can't use NPM or Bower to install.
Any pointers gratefully received.
Regards, Alistair
Hi AListar
Just add script to your master view:
Add configuration code like in documentation:
Write some code that uses a player:
Thanks,
Alex
Hi Alex,
Yes, that's what is in their documentation and I tried that initially but the config section threw errors when I tried to use it. After looking at the jsfiddle code that the documentation has a link to, and emailing Talkify themselves, I ended up with the following working code:
I took out the text highlighting because that stripped out the styling from whichever piece of text was being read. So that I could decide exactly which bits of the page to read I added a .readMe class to the relevant elements and used that in the withElements parameter.
Hope that's useful to anyone else trying to do this.
Cheers, Alistair
Hi Alistair
Yeah I had that problem two. Can you tell me how you setup the hole HTML? Thanks
Best
is working on a reply...