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'),
    });
});

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();
    },
  }
});

<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}}

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);
    },
  }
});

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

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