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 314 karma points
    Jun 08, 2018 @ 11:39
    Alistair Jenkins
    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

  • Alex Skrypnyk 4818 posts 17333 karma points MVP 2x admin c-trib
    Jun 19, 2018 @ 14:30
    Alex Skrypnyk
    0

    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

  • Alistair Jenkins 92 posts 314 karma points
    Jun 21, 2018 @ 15:42
    Alistair Jenkins
    100

    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

Please Sign in or register to post replies

Write your reply to:

Draft