implementing talkify in umbraco

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Alistair Jenkins 92 posts 315 karma points

Jun 08, 2018 @ 11:39

0

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

Copy Link

Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib

Jun 19, 2018 @ 14:30

Hi AListar

Just add script to your master view:

<script src="talkify.min.js"></script>

Add configuration code like in documentation:

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();

Thanks,

Alex

Copy Link

Alistair Jenkins 92 posts 315 karma points

Jun 21, 2018 @ 15:42

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:

<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.

Cheers, Alistair

Copy Link

mee 1 post 71 karma points

Aug 02, 2019 @ 07:27

0

Hi Alistair

Yeah I had that problem two. Can you tell me how you setup the hole HTML? Thanks

Best

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?