Text-to-Speech angular module
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src/js
test
tts-backend
.bowerrc
.gitignore
.jshintrc
.travis.yml
Gruntfile.js
LICENSE
README.md
app.js
bower.json
index.html
package.json
pjTextToSpeech.js
pjTextToSpeech.min.js
style.css

README.md

pjTextToSpeech Build Status

pjTextToSpeach a simple Text-2-Speach AngularJS module, based on Google Text-to-Speach API.This particular implementation depends on back-end side script which forwarding requests to the Google TTS API. The advantage of this solution is that generated files are cached in predefined folder and Google API is requested only once.

EDIT 2016-01-01 Google has swittched of a fee experimental TTS API and introduced a new payed version.

See Speach API pricing

Due to this change the plugin does not work - needs to be updated to use a new TTS API.

See Demo

Text-2-Speech example

Instalation

  1. Install via 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 pjTextToSpeach 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 don't require tts directive. The other usage is injecting TTSAudio object e.g inside your controller 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'
   });

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

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

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

Animated bootstrap button

The bootstrap button are static by default. If you want achieve effect like in this demo page you have to add 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);}
}