Speech Recognition API use's case example

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Accessibility example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="btn">Can you read this text for me?</button>
  <article>
    <h1 class="slowly-pronounced">Posso tirar uma foto com vocês?</h1>
  </article>

  <script src="script.js"></script>
</body>
</html>

// Code goes here
if (!!window.speechSynthesis) {
  function Speech() {
    // Service logic
    // ...
    var msg;
    if(window.speechSynthesis) {
      msg = new window.SpeechSynthesisUtterance();

      //calling get voices method first scaffolds it for
      //use in say method
      window.speechSynthesis.getVoices();
    }

    // Public API here
    return {

      /**
       * Message configurations
       * @property _msg
       * @type {Object}
       */
      _msg: msg,

      /**
       * Read string and talk content for user
       * @param  {String} text   Text content for talk content for user
       * @param  {Object} config Configuration options
       * @return {Boolean}
       * @method sayText
       */
      sayText: function(text, config) {
        var voices = window.speechSynthesis.getVoices();

        //choose voice. Fallback to default
        this._msg.voice = config.voiceIndex !== undefined ? voices[config.voiceIndex] : voices[0];
        this._msg.volume = config.volume !== undefined ? config.volume : 1;
        this._msg.rate = config.rate !== undefined ? config.rate : 1;
        this._msg.pitch = config.pitch !== undefined ? config.pitch : 1;

        //message for speech
        this._msg.text = text;
        this._msg.lang = 'en-US';

        window.speechSynthesis.speak(this._msg);

        return true;
      }
    };
  }
  var Speech = Speech();
  var voices = window.speechSynthesis.getVoices();
  var el = document.getElementById('btn'); 
  el.addEventListener('click', function () {
    var config = {
      voiceIndex: voices[0],
      rate: 1,
      pitch: 1,
      volume: 1
    };
    
    Speech.sayText(document.querySelector('article').innerText, config);
    
    console.log('event dispatched!');
    
  }, false);
  
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Quicksand', 'Helvetica Neue',Helvetica,Arial, sans-serif;
  font-size: 18px;
  background: #E7E7E7;
  font-weight: 500;
  color: #666;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  voice-family: male;
  stress: 20;
  richness: 90;
  cue-before: url("pop.au");
  font-family: 'Montserrat', 'Helvetica Neue',Helvetica,Arial,sans-serif;
}

article{
  background: #FFF;
  padding: 10px;
  border-radius: 5px;
  width: 90%;
  margin: 10px auto;
  color: #555;
}

article p{
  speech-rate: fast;
  richness: 100;
  pause-before: 3;
  pause-after: 3;
  pitch: high;
  volume: 100%;
  azimuth: center-left;
}
.low-pitch-voice {
voice-pitch: x-low;
}
.high-pitch-voice {
voice-pitch: high;
}
.slowly-pronounced {
voice-rate: x-slow;
}
.medium-volume-level {
voice-volume: medium;
}

This is a example of Speech Recognition API use's case example