pjTextToSpeech

Angular Text-2-speech module

Angular directive and service Text-to-speech

Demo

This particular implementation depends on a back-end side script which forwards requests to Google TTS API. The advantage of this solution is that generated files are cached in a predefined folder and Google API is requested only once.

pjTextTospeech a simple Text-2-speech AngularJS module, based on Google Text-to-speech API.

Instalation

Download pjTextTospeech manually or install with bower:

bower install pjTextTospeech --save

Integration

Include pjTextTospeech resource file with the Bootstrap CSS (it is not required but styling is based on bootstrap classes).:

<link rel="stylesheet" href="bootstrap.min.css">
<script src="pjTextTospeech.min.js"></script>

Include pjTextTospeech as a dependency in your app module:


var app = angular.module('TTSApp', ['pjTts']);

Place tts element into your HTML:

                    
<body>
<tts tts-text="Hello world" tts-lang="en" ></tts>
...
</body>

Inject TTSConfig in your controller and setup back-end url for calling generated audio files:


app.controller('YourController', function( TTSConfig){
    TTSConfig.url = 'http://tts.dev/tts-backend/index.php';
}

See the back-end integration example.

Usage without directive

The module does not require tts directive. The other usage is injecting TTSAudio object in e.g (Controller, Service) and calling API directly.


app.controller('YourController',
    function($scope, $log, TTSConfig, TTSAudio, TTS_EVENTS){

    TTSConfig.url = 'http://tts.dev/tts-backend/index.php';
    var tts = new TTSAudio();
    tts.speak({
        text : 'Hello word',
        lang : 'en'
        // you can add additional params which will send to server
    });

    // triggered after speaking
    $scope.$on(TTS_EVENTS.SUCCESS, function(){
        $log.info('Successfully done!')
    });

    // triggered in case error
    $scope.$on(TTS_EVENTS.ERROR, function(){
        $log.info('An unexpected error has occurred');
    });

    // before loading and speaking
    $scope.$on(TTS_EVENTS.PENDING, function(text){
        $log.info('Speaking: ' + text);
    });
}

Animated bootstrap button

The bootstrap buttons are static by default. If you want to achieve the effect as in this demo page you have to add the following CSS into your page.


.glyphicon-refresh{
    animation: spin .7s infinite linear;
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}