Hacer una APP de Texto-Audio

try {
  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  var recognition = new SpeechRecognition();
}
catch(e) {
  console.error(e);
  $('.no-browser-support').show();
  $('.app').hide();
}
 
 
var noteTextarea = $('#note-textarea');
var instructions = $('#recording-instructions');
var notesList = $('ul#notes');
 
var noteContent = '';
 
// Toma todas las notas de sesiones anteriores y las muestra.
var notes = getAllNotes();
renderNotes(notes);
 
 
 
/*-----------------------------
      Reconocimiento de voz 
------------------------------*/
 
// Si se deja - false, la grabacion se detiene despues de unos segundos de silencio.
// Si se deja - true, la grabacion se detiene despues de 15 segundos aprox, dando tiempo para que el usuario pause. 
recognition.continuous = true;
 
// Este bloque es llamado cada vez que el Speech APi captura una linea.
recognition.onresult = function(event) {
 
  // event es el objeto SpeechRecognitionEvent.
  // Guarda las lineas capturadas. 
  // Solo es necesaria la que esta activa.
  var current = event.resultIndex;
 
  // Toma una transcripcion de lo que se dijo.
  var transcript = event.results[current][0].transcript;
 
  // Añadir la trasncripcion actual al contenido de la nota.
  // Hay un bug en moviles, todo se repite 2 veces. 
  // No hay una solucion oficial, hasta ahora has servido esta.
  var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);
 
  if(!mobileRepeatBug) {
    noteContent += transcript;
    noteTextarea.val(noteContent);
  }
};
 
recognition.onstart = function() { 
  instructions.text('Voice recognition activated. Try speaking into the microphone.');
}
 
recognition.onspeechend = function() {
  instructions.text('You were quiet for a while so voice recognition turned itself off.');
}
 
recognition.onerror = function(event) {
  if(event.error == 'no-speech') {
    instructions.text('No speech was detected. Try again.');  
  };
}
 
 
 
/*-----------------------------
      Botones de App y input 
------------------------------*/
 
$('#start-record-btn').on('click', function(e) {
  if (noteContent.length) {
    noteContent += ' ';
  }
  recognition.start();
});
 
 
$('#pause-record-btn').on('click', function(e) {
  recognition.stop();
  instructions.text('Reconocimiento Pausado.');
});
 
// Sincroniza el texto dentro del area de texto con la variable noteContent
noteTextarea.on('input', function() {
  noteContent = $(this).val();
})
 
$('#save-note-btn').on('click', function(e) {
  recognition.stop();
 
  if(!noteContent.length) {
    instructions.text('No pudimos guardar la nota de voz. Por favor agrega un mensaje en tu nota.');
  }
  else {
    // Guarda la nota en localStorage.
    // key es la fecha, value es el contenido de la nota.
    saveNote(new Date().toLocaleString(), noteContent);
 
    // Reninicia variables y actualiza UI.
    noteContent = '';
    renderNotes(getAllNotes());
    noteTextarea.val('');
    instructions.text('Nota guardada satisfactoriamente');
  }
 
})
 
 
notesList.on('click', function(e) {
  e.preventDefault();
  var target = $(e.target);
 
  // Escuchar la nota de voz actual.
  if(target.hasClass('listen-note')) {
    var content = target.closest('.note').find('.content').text();
    readOutLoud(content);
  }
 
  // Eliminar nota.
  if(target.hasClass('delete-note')) {
    var dateTime = target.siblings('.date').text();  
    deleteNote(dateTime);
    target.closest('.note').remove();
  }
});
 
 
 
/*-----------------------------
      Sintesis de discurso
------------------------------*/
 
function readOutLoud(message) {
	var speech = new SpeechSynthesisUtterance();
 
  // Configura los atributos de texto y voz.
	speech.text = message;
	speech.volume = 1;
	speech.rate = 1;
	speech.pitch = 1;
 
	window.speechSynthesis.speak(speech);
}
 
 
 
/*-----------------------------
      Helper Functions 
------------------------------*/
 
function renderNotes(notes) {
  var html = '';
  if(notes.length) {
    notes.forEach(function(note) {
      html+= `<li class="note">
        <p class="header">
          <span class="date">${note.date}</span>
          <a href="#" class="listen-note" title="Listen to Note">Escuchar nota de voz</a>
          <a href="#" class="delete-note" title="Delete">Eliminar</a>
        </p>
        <p class="content">${note.content}</p>
      </li>`;    
    });
  }
  else {
    html = '<li><p class="content">Tu no tienes ninguna nota de voz.</p></li>';
  }
  notesList.html(html);
}
 
 
function saveNote(dateTime, content) {
  localStorage.setItem('note-' + dateTime, content);
}
 
 
function getAllNotes() {
  var notes = [];
  var key;
  for (var i = 0; i < localStorage.length; i++) {
    key = localStorage.key(i);
 
    if(key.substring(0,5) == 'note-') {
      notes.push({
        date: key.replace('note-',''),
        content: localStorage.getItem(localStorage.key(i))
      });
    } 
  }
  return notes;
}
 
 
function deleteNote(dateTime) {
  localStorage.removeItem('note-' + dateTime); 
}

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>APP para Reproducir texto en notas de voz</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta16/shoelace.css">
        <link rel="stylesheet" href="styles.css">
 
    </head>
    <body>
        <div class="container">
 
            <h1>Hacer una APP de texto-audio</h1>
            <p class="page-description">APP para Reproducir texto en notas de voz usando HTML y JavaScript, esta APP te permitira reproducir el texto que agregues en notas de voz para escuchar instantaneamente.</p>
            <p><a class="enlace-inicio" href="https://internetedadinero.com/">Ver el tutorial completo en InterneTedaDinero.com</a></p>
 
            <h3 class="no-browser-support">Disculpa, tu navegador no soprta el Web Speech API. Intenta usando Google Chrome.</h3>
 
            <div class="app"> 
                <h3>Agregar una nota de voz</h3>
                <div class="input-single">
                    <textarea id="note-textarea" placeholder="Escribe el texto para crear una nota de voz..." rows="6"></textarea>
                </div>         
                <button id="start-record-btn" title="Start Recording">Iniciar Reconocimento</button>
                <button id="pause-record-btn" title="Pause Recording">Pausar Reconocimento</button>
                <button id="save-note-btn" title="Save Note">Guardar Nota y Escuchar</button>   
                <p id="recording-instructions">Oprime el boton <strong>Iniciar Reconocimento</strong> para empezar.</p>
                <hr>
                <h3>Mis notas de voz - Escuchar</h3>
                <ul id="notes">
                    <li>
                        <p class="no-notes">Tu no tienes ninguna nota de voz.</p>
                    </li>
                </ul>
 
            </div>
 
        </div>
 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="script.js"></script>
 
    </body>
</html>

ul {
list-style: none;
padding: 0;
}
 
p {
color: #444;
}
 
a {
color: #2a8d3a;
}
 
button:focus {
outline: 0;
}
 
.button, button {
background-color: #2a8d3a;
}
 
.button:hover, button:hover {
background-color: #333;
}
 
.container {
max-width: 700px;
margin: 0 auto;
padding: 20px 50px;
text-align: center;
}
 
.container h1 {
margin-bottom: 20px;
}
 
.page-description {
font-size: 1.1rem;
margin: 0 auto;
}
 
.enlace-inicio {
font-size: 1em;
color: #888;
text-decoration: none;
}
 
.enlace-inicio:hover {
color: #2a8d3a;
}
 
.no-browser-support {
display: none;
font-size: 1.2rem;
color: #e64427;
margin-top: 35px;
}
 
.app {
margin: 40px auto;
}
 
#note-textarea {
margin: 20px 0;
border: 1px solid #ccc;
}
 
#recording-instructions {
margin: 15px auto 20px;
}
 
#notes {
padding-top: 2px;
}
 
.note .header {
font-size: 0.9em;
color: #888;
margin-bottom: 10px;
}
 
.note .delete-note,
.note .listen-note {
text-decoration: none;
margin-left: 15px;
}
 
.note .content {
margin-bottom: 40px;
}
 
@media (max-width: 768px) {
.container {
padding: 50px 25px;
}
 
button {
margin-bottom: 10px;
}
 
}