Hagsten / Talkify

Javascript Text to speech library
216 stars 32 forks source link

GREAT SCRIPT... 2 THUMBS UP!!! Q: How to auto scroll text and slow down speech a bit more #6

Closed inglesuniversal closed 7 years ago

inglesuniversal commented 7 years ago

This is my code based on your example provided...

  <script>
    talkify.config.host = 'http://talkify.net';
talkify.config.ui.audioControls = {
  enabled: true, //<-- Disable to get the browser built in audio controls
  container: document.getElementById("player-and-voices")
};
$(document).ready(function(){
        var player = new talkify.TtsPlayer()
            .enableTextHighlighting();
    var playlist = new talkify.playlist()
            .begin()
            .usingPlayer(player)
        .withRootSelector('#root')
        .withTextInteraction()
        .build()
        .play();        
});
</script>

QUESTIONS:

1.- How can I auto scroll the page the way you did it on your website which loads external URLs ?

2.- How can I reduce the speech rate much lower than the default value? or better yet... Have much lower adjustable speeds.

3.- I installed your NPM installation script on my server hosted on AWS, so if you think I can get some load off from yours, please tell me if there is a way to run the code locally, without consuming bandwidth from your server.

I REALLY ADMIRE YOUR WORK... I had found similar codes in the past but NONE beats yours... and as far as licensed text highlighters form paid services... some are outrageously expensive. We plan to use this script, to help English Learners improved their skills by reading along stories, news and the like.

Best regards

Hugo B

Hagsten commented 7 years ago

Hi @inglesuniversal!

I'll answer question 1 and 3 today and will get back to you regarding Q #2 later :).

  1. You can subscribe to the "onBeforeItemPlaying" event of the player

    player.subscribeTo({
            onBeforeItemPlaying: function (item) {
                //TODO: Custom code - Do the scrolling!
           }});
  2. You could use the WebSpeech API for when the users are using Chrome (which has the best support), it will use the browser build in voices and thereforw won't go to our servers (text highlighting will be limited to those voices that supports that). To use that you can instantiate a Html5Player (instead of a TtsPlayer).

I hope that helps :)

Hagsten commented 7 years ago

@inglesuniversal the audio control that we ship in this lib is limited to a rate between 1 and 3. I will look into making this more flexible as soon as I get some time off :).

However, you can set the rate on the player itself if you want, i.e. "player.setRate(int value)". The value can be between -10 and 10.

hugo commented 7 years ago

@Hagsten you've tagged the wrong person :)

Hagsten commented 7 years ago

Latest version now includes a better rate interval (-5 to 5). As mentioned, you can always set your own rate between -10 and 10 for the TtsPlayer and 0 to 10 for the Html5Player.