ember-speak

ember-speak

Add speech-to-text (STT) and text-to-speech (TTS) to your Ember app.

Demo

A demo is setup over at https://tsteuwer.github.io/ember-speak/.

Browser Support

Can I Use?

Most browsers have pretty decent support for the SpeechSynthesis API. However, there are some things to note in regards to Chrome -- specifically in regards to this and this.

TLDR Chrome has a bug where speech would stop reading after about 15 seconds or 200-300 characters. I found a way around this by periodically pausing and resuming the speechSynthesis instance. This makes it read 100% of the text.

However, I also found another bug in Chrome which stops all sound from occuring if you pause the utterance for more than 15 seconds. It basically stops reading aloud the text when you resume. This is also filed in those same tickets above. If you do end up using this addon, you may (eek) want to prevent pausing for Chrome users.

You can also use the isAvailable computed properties in both SpeechRecorder and SpeechReader services.

export default Ember.Controller.extend({
  speechReader: Ember.inject.service(),
  speechRecorder: Ember.inject.service(),
  [...]
  init() {
    this._super(...arguments);
    this.get('model').setProperties({
      readingAvailable: this.get('speechReader.isAvailable'),
      recordingAvailable: this.get('speechRecorder.isAvailable'),
    });
});

Text-To-Speech (TTS)

Allow the browser to read text to your users using the SpeechSynthesis and SpeechSynthesisUtterance APIs.

Example

Controller

export default Ember.Controller.extend({
  speechReader: Ember.inject.service(),
  // [...]
  actions: {
    read(text) {
      const currentReader = this.get('model.reader');
      const speechReader = this.get('speechReader');

      // Always destroy the old reader if used. It will remove events attached to the old utterance since it will be removed from the speechSyntehsis queue
      if (currentReader) currentReader.destroy(); 

      const reader = speechReader.getNewReader(text);
      this.set('model.reader', reader);

      reader.play();
    },
    pause() {
      this.get('model.reader').pause();
    },
    resume() {
      this.get('model.reader').resume();
    },
  }
});

Template

<button {{action 'read' "This is your profile"}}>
  Read Profile
</button>
{{#if model.reader.isPlaying}}
  Playing... <button {{action "pause"}}>Pause</button>
{{else if model.reader.isPaused}}
  Paused... <button {{action "resume"}}>Resume</button>
{{/if}}

Speech-To-Text (STT)

Allow the browser transcribe what your users are saying via the SpeechRecognition API.

Example

Controller

export default Ember.Controller.extend({
  speechRecorder: Ember.inject.service(),
  // [...]
  actions: {  
    reset() {
      this.get('model').setProperties({
        transcript: '',
        error: '',
      });
    },
    stop() {
      const recorder = this.get('model.recorder');
      if (recorder) {
        recorder.stop();
      }
    },
    record() {
      this.send('stop');
      this.send('reset');

      const model = this.get('model');
      const speechRecorder = this.get('speechRecorder');
      const recorder = speechRecorder.getRecorder();

      recorder.on('transcribed', (text) => {
        model.set('transcript', model.get('transcript') + text);
      });
      recorder.on('error', (err) => {
        model.set('error', err.msg);
      });

      recorder.start();

      model.set('recorder', recorder);
    },
  }
});

Template

<button {{action 'record'}}>
  Start Recording
</button>
{{#if model.recorder.isRecording}}
  Recording... <button {{action "stop"}}>Stop</button>
{{/if}}

<hr />
What you've said: {{model.transcript}}

Addon Maintenance

Installation

• git clone <repository-url> this repository
• cd ember-speak
• npm install
• bower install

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.