Skip to main content
Olvidé explicar cómo hacer sonar el sonido desde javascript. También he envuelto el código con try/catch
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64
<audio autoplay id="sonido"
  src="data:audio/mpeg;base64,/+MgxAAPmN64HEBMdADBmgRg4EBZ7u6H3yBHgjfIfqN878Y1sQIFgMeYQWCFZ/5T9m6Xc9n/E6/u+IBoYB9H9ajge/+Tv///94YE6i1FZLCJvetoDDiIQs9FHFHLGoChtQEmPhxj+qX/4yLEHBWhlt5eMgYIF6u3+zVSDNWP9Vjf7HlxqpQ/4fw7+dX1wqiIed+ysJHvIlZ3w0JRj/pxEJSv/lQkHQa+W6P/xEBTodoBDAwhyKgMGioqKiqip///oqIt2qi////+v/2+6mp/rr3/4yDEIQ/0DiwAEAWsHOSVpVM0xZTRlJO1nYxbiDjnDAQ4EZXqJCFCBSkGov/29P/+tmluv/0//b///6/11obveYSfkNPQWTzZUg8NCbreDaKoykFjgprRxcI4Rs0wEsWXEhEkCyrICv/jIsQ8D9QWIAAAjbA8IC2q6q6+/f3p93f3//////9adRmv1SUiM+Z4Uzw/a7ejHTtSD3BOwNrsjp5MeYSIJhIGVQRI6kQg/DjSBRgyzh+Dcvqvb/n9/6fRf////9Nb5UvsVkYiCW7yNf/jIMRYD/QWIAAAjcyrYlVzUknC7yHfNAqoqh8qmWjM7AgLxqZVPTuyizJFA10IcmKEDokD6r//6zeb/1dDf////2/5ctjKUsx2MjiQr2fU40iTnGMVWa2o1HP/UlA1NDU0NLIa0iNs/+MixHMQFBYgAACTzNwbLmXoVkRETWRIwyhzyTAL/qv6on//qv//RVT6oi+xlVOzlTqi+5TFMIhIIiRBNC83P2+bLOzf/Zo0op2dnZ4jZqaNFCRIgmgtSRE44+LjUSRqTEFNRTMuMTAw/+MgxI4QvBYYAACTzKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr/4yLEphBsFcQAAU3Mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo=">
</audio>

He codificado el audio en base64 una pulsación obtenido del vídeo que indicas para no tener que enlazar a un archivo externo.

Posteriormente puedes hacer sonar el sonido desde javascript mediante Elemento.play():

try {
  document.getElementById('sonido').play();
} catch(e) { }
/* Precargamos el elemento de sonido y creamos un grupo de 4 sonidos simultáneos */
let sonido = [
  document.getElementById('sonido1'),
  document.getElementById('sonido2'),
  document.getElementById('sonido3'),
  document.getElementById('sonido4'),
];
/* Copiamos el sonido */
sonido[1].src = sonido[0].src;
sonido[2].src = sonido[0].src;
sonido[3].src = sonido[0].src;

/* La animación comenzará tras pulsar en el botón */
document.getElementById('empezar').addEventListener('click', typeItOut);

// Efecto para escritura, se llama como typeit en el estilo
/* Ya que el sonido requiere de interacción con la página,
  esperamos a que el usuario pulse en el botón para comenzar */
typeItOut();

function typeItOut(){
  var els   = [];
  var intID = 0;
  var init  = _init();

  function _init() {
    $('.typeit').each(function(index, el){
      var target = $(el);
      var string = target.text();
      $(el).text('');
      els.push({
        target : target,
        string : string
      });
    });
    intID = setInterval(typeLetters, 80);
  }
  
  function typeLetters(){
    /* Aleatoriamente descansamos de teclear un 60% de las veces */
    if (Math.random() > 0.4) {
        return;
    }

    /* Si hemos llegado al final del texto finalizamos */
    if(els.length <= 0) clearInterval(intID);
    
    for(var i in els){
      var target = els[i].target;
      var text   = els[i].string.substring(0, target.text().length + 1);
      target.text( text );

      /* Reproducimos el sonido rotando entre los 4 reproductores */
      try {
        sonido[text.length % 4].play();
      } catch(e) { }

      if(els[i].string.length == text.length) {
        els.splice(i, 1);
      }
    }
  }
}
body {
    background: #000460;
    color: #48ABF3;
    font-family: 'VT323', monospace;
}
audio { display: none; }
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
<audio controls id="sonido1" src="data:audio/mpeg;base64,/+MgxAAPmN64HEBMdADBmgRg4EBZ7u6H3yBHgjfIfqN878Y1sQIFgMeYQWCFZ/5T9m6Xc9n/E6/u+IBoYB9H9ajge/+Tv///94YE6i1FZLCJvetoDDiIQs9FHFHLGoChtQEmPhxj+qX/4yLEHBWhlt5eMgYIF6u3+zVSDNWP9Vjf7HlxqpQ/4fw7+dX1wqiIed+ysJHvIlZ3w0JRj/pxEJSv/lQkHQa+W6P/xEBTodoBDAwhyKgMGioqKiqip///oqIt2qi////+v/2+6mp/rr3/4yDEIQ/0DiwAEAWsHOSVpVM0xZTRlJO1nYxbiDjnDAQ4EZXqJCFCBSkGov/29P/+tmluv/0//b///6/11obveYSfkNPQWTzZUg8NCbreDaKoykFjgprRxcI4Rs0wEsWXEhEkCyrICv/jIsQ8D9QWIAAAjbA8IC2q6q6+/f3p93f3//////9adRmv1SUiM+Z4Uzw/a7ejHTtSD3BOwNrsjp5MeYSIJhIGVQRI6kQg/DjSBRgyzh+Dcvqvb/n9/6fRf////9Nb5UvsVkYiCW7yNf/jIMRYD/QWIAAAjcyrYlVzUknC7yHfNAqoqh8qmWjM7AgLxqZVPTuyizJFA10IcmKEDokD6r//6zeb/1dDf////2/5ctjKUsx2MjiQr2fU40iTnGMVWa2o1HP/UlA1NDU0NLIa0iNs/+MixHMQFBYgAACTzNwbLmXoVkRETWRIwyhzyTAL/qv6on//qv//RVT6oi+xlVOzlTqi+5TFMIhIIiRBNC83P2+bLOzf/Zo0op2dnZ4jZqaNFCRIgmgtSRE44+LjUSRqTEFNRTMuMTAw/+MgxI4QvBYYAACTzKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr/4yLEphBsFcQAAU3Mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo="></audio>
<audio controls id="sonido2"></audio><audio controls id="sonido3"></audio><audio controls id="sonido4"></audio>
<button id="empezar">Empezar</button>
<p class="lead mb-0 typeit">Escrito fácil para funcionar... Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio autoplay id="sonido"
  src="data:audio/mpeg;base64,/+MgxAAPmN64HEBMdADBmgRg4EBZ7u6H3yBHgjfIfqN878Y1sQIFgMeYQWCFZ/5T9m6Xc9n/E6/u+IBoYB9H9ajge/+Tv///94YE6i1FZLCJvetoDDiIQs9FHFHLGoChtQEmPhxj+qX/4yLEHBWhlt5eMgYIF6u3+zVSDNWP9Vjf7HlxqpQ/4fw7+dX1wqiIed+ysJHvIlZ3w0JRj/pxEJSv/lQkHQa+W6P/xEBTodoBDAwhyKgMGioqKiqip///oqIt2qi////+v/2+6mp/rr3/4yDEIQ/0DiwAEAWsHOSVpVM0xZTRlJO1nYxbiDjnDAQ4EZXqJCFCBSkGov/29P/+tmluv/0//b///6/11obveYSfkNPQWTzZUg8NCbreDaKoykFjgprRxcI4Rs0wEsWXEhEkCyrICv/jIsQ8D9QWIAAAjbA8IC2q6q6+/f3p93f3//////9adRmv1SUiM+Z4Uzw/a7ejHTtSD3BOwNrsjp5MeYSIJhIGVQRI6kQg/DjSBRgyzh+Dcvqvb/n9/6fRf////9Nb5UvsVkYiCW7yNf/jIMRYD/QWIAAAjcyrYlVzUknC7yHfNAqoqh8qmWjM7AgLxqZVPTuyizJFA10IcmKEDokD6r//6zeb/1dDf////2/5ctjKUsx2MjiQr2fU40iTnGMVWa2o1HP/UlA1NDU0NLIa0iNs/+MixHMQFBYgAACTzNwbLmXoVkRETWRIwyhzyTAL/qv6on//qv//RVT6oi+xlVOzlTqi+5TFMIhIIiRBNC83P2+bLOzf/Zo0op2dnZ4jZqaNFCRIgmgtSRE44+LjUSRqTEFNRTMuMTAw/+MgxI4QvBYYAACTzKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr/4yLEphBsFcQAAU3Mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo=">
</audio>

He codificado el audio en base64 una pulsación obtenido del vídeo que indicas para no tener que enlazar a un archivo externo.

/* Precargamos el elemento de sonido y creamos un grupo de 4 sonidos simultáneos */
let sonido = [
  document.getElementById('sonido1'),
  document.getElementById('sonido2'),
  document.getElementById('sonido3'),
  document.getElementById('sonido4'),
];
/* Copiamos el sonido */
sonido[1].src = sonido[0].src;
sonido[2].src = sonido[0].src;
sonido[3].src = sonido[0].src;

/* La animación comenzará tras pulsar en el botón */
document.getElementById('empezar').addEventListener('click', typeItOut);

// Efecto para escritura, se llama como typeit en el estilo
/* Ya que el sonido requiere de interacción con la página,
  esperamos a que el usuario pulse en el botón para comenzar */
typeItOut();

function typeItOut(){
  var els   = [];
  var intID = 0;
  var init  = _init();

  function _init() {
    $('.typeit').each(function(index, el){
      var target = $(el);
      var string = target.text();
      $(el).text('');
      els.push({
        target : target,
        string : string
      });
    });
    intID = setInterval(typeLetters, 80);
  }
  
  function typeLetters(){
    /* Aleatoriamente descansamos de teclear un 60% de las veces */
    if (Math.random() > 0.4) {
        return;
    }

    /* Si hemos llegado al final del texto finalizamos */
    if(els.length <= 0) clearInterval(intID);
    
    for(var i in els){
      var target = els[i].target;
      var text   = els[i].string.substring(0, target.text().length + 1);
      target.text( text );

      /* Reproducimos el sonido rotando entre los 4 reproductores */
      sonido[text.length % 4].play();

      if(els[i].string.length == text.length) {
        els.splice(i, 1);
      }
    }
  }
}
body {
    background: #000460;
    color: #48ABF3;
    font-family: 'VT323', monospace;
}
audio { display: none; }
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
<audio controls id="sonido1" src="data:audio/mpeg;base64,/+MgxAAPmN64HEBMdADBmgRg4EBZ7u6H3yBHgjfIfqN878Y1sQIFgMeYQWCFZ/5T9m6Xc9n/E6/u+IBoYB9H9ajge/+Tv///94YE6i1FZLCJvetoDDiIQs9FHFHLGoChtQEmPhxj+qX/4yLEHBWhlt5eMgYIF6u3+zVSDNWP9Vjf7HlxqpQ/4fw7+dX1wqiIed+ysJHvIlZ3w0JRj/pxEJSv/lQkHQa+W6P/xEBTodoBDAwhyKgMGioqKiqip///oqIt2qi////+v/2+6mp/rr3/4yDEIQ/0DiwAEAWsHOSVpVM0xZTRlJO1nYxbiDjnDAQ4EZXqJCFCBSkGov/29P/+tmluv/0//b///6/11obveYSfkNPQWTzZUg8NCbreDaKoykFjgprRxcI4Rs0wEsWXEhEkCyrICv/jIsQ8D9QWIAAAjbA8IC2q6q6+/f3p93f3//////9adRmv1SUiM+Z4Uzw/a7ejHTtSD3BOwNrsjp5MeYSIJhIGVQRI6kQg/DjSBRgyzh+Dcvqvb/n9/6fRf////9Nb5UvsVkYiCW7yNf/jIMRYD/QWIAAAjcyrYlVzUknC7yHfNAqoqh8qmWjM7AgLxqZVPTuyizJFA10IcmKEDokD6r//6zeb/1dDf////2/5ctjKUsx2MjiQr2fU40iTnGMVWa2o1HP/UlA1NDU0NLIa0iNs/+MixHMQFBYgAACTzNwbLmXoVkRETWRIwyhzyTAL/qv6on//qv//RVT6oi+xlVOzlTqi+5TFMIhIIiRBNC83P2+bLOzf/Zo0op2dnZ4jZqaNFCRIgmgtSRE44+LjUSRqTEFNRTMuMTAw/+MgxI4QvBYYAACTzKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr/4yLEphBsFcQAAU3Mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo="></audio>
<audio controls id="sonido2"></audio><audio controls id="sonido3"></audio><audio controls id="sonido4"></audio>
<button id="empezar">Empezar</button>
<p class="lead mb-0 typeit">Escrito fácil para funcionar... Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="sonido"
  src="data:audio/mpeg;base64,/+MgxAAPmN64HEBMdADBmgRg4EBZ7u6H3yBHgjfIfqN878Y1sQIFgMeYQWCFZ/5T9m6Xc9n/E6/u+IBoYB9H9ajge/+Tv///94YE6i1FZLCJvetoDDiIQs9FHFHLGoChtQEmPhxj+qX/4yLEHBWhlt5eMgYIF6u3+zVSDNWP9Vjf7HlxqpQ/4fw7+dX1wqiIed+ysJHvIlZ3w0JRj/pxEJSv/lQkHQa+W6P/xEBTodoBDAwhyKgMGioqKiqip///oqIt2qi////+v/2+6mp/rr3/4yDEIQ/0DiwAEAWsHOSVpVM0xZTRlJO1nYxbiDjnDAQ4EZXqJCFCBSkGov/29P/+tmluv/0//b///6/11obveYSfkNPQWTzZUg8NCbreDaKoykFjgprRxcI4Rs0wEsWXEhEkCyrICv/jIsQ8D9QWIAAAjbA8IC2q6q6+/f3p93f3//////9adRmv1SUiM+Z4Uzw/a7ejHTtSD3BOwNrsjp5MeYSIJhIGVQRI6kQg/DjSBRgyzh+Dcvqvb/n9/6fRf////9Nb5UvsVkYiCW7yNf/jIMRYD/QWIAAAjcyrYlVzUknC7yHfNAqoqh8qmWjM7AgLxqZVPTuyizJFA10IcmKEDokD6r//6zeb/1dDf////2/5ctjKUsx2MjiQr2fU40iTnGMVWa2o1HP/UlA1NDU0NLIa0iNs/+MixHMQFBYgAACTzNwbLmXoVkRETWRIwyhzyTAL/qv6on//qv//RVT6oi+xlVOzlTqi+5TFMIhIIiRBNC83P2+bLOzf/Zo0op2dnZ4jZqaNFCRIgmgtSRE44+LjUSRqTEFNRTMuMTAw/+MgxI4QvBYYAACTzKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr/4yLEphBsFcQAAU3Mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo=">
</audio>

He codificado el audio en base64 una pulsación obtenido del vídeo que indicas para no tener que enlazar a un archivo externo.

Posteriormente puedes hacer sonar el sonido desde javascript mediante Elemento.play():

try {
  document.getElementById('sonido').play();
} catch(e) { }
/* Precargamos el elemento de sonido y creamos un grupo de 4 sonidos simultáneos */
let sonido = [
  document.getElementById('sonido1'),
  document.getElementById('sonido2'),
  document.getElementById('sonido3'),
  document.getElementById('sonido4'),
];
/* Copiamos el sonido */
sonido[1].src = sonido[0].src;
sonido[2].src = sonido[0].src;
sonido[3].src = sonido[0].src;

/* La animación comenzará tras pulsar en el botón */
document.getElementById('empezar').addEventListener('click', typeItOut);

// Efecto para escritura, se llama como typeit en el estilo
/* Ya que el sonido requiere de interacción con la página,
  esperamos a que el usuario pulse en el botón para comenzar */
typeItOut();

function typeItOut(){
  var els   = [];
  var intID = 0;
  var init  = _init();

  function _init() {
    $('.typeit').each(function(index, el){
      var target = $(el);
      var string = target.text();
      $(el).text('');
      els.push({
        target : target,
        string : string
      });
    });
    intID = setInterval(typeLetters, 80);
  }
  
  function typeLetters(){
    /* Aleatoriamente descansamos de teclear un 60% de las veces */
    if (Math.random() > 0.4) {
        return;
    }

    /* Si hemos llegado al final del texto finalizamos */
    if(els.length <= 0) clearInterval(intID);
    
    for(var i in els){
      var target = els[i].target;
      var text   = els[i].string.substring(0, target.text().length + 1);
      target.text( text );

      /* Reproducimos el sonido rotando entre los 4 reproductores */
      try {
        sonido[text.length % 4].play();
      } catch(e) { }

      if(els[i].string.length == text.length) {
        els.splice(i, 1);
      }
    }
  }
}
body {
    background: #000460;
    color: #48ABF3;
    font-family: 'VT323', monospace;
}
audio { display: none; }
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
<audio controls id="sonido1" src="data:audio/mpeg;base64,/+MgxAAPmN64HEBMdADBmgRg4EBZ7u6H3yBHgjfIfqN878Y1sQIFgMeYQWCFZ/5T9m6Xc9n/E6/u+IBoYB9H9ajge/+Tv///94YE6i1FZLCJvetoDDiIQs9FHFHLGoChtQEmPhxj+qX/4yLEHBWhlt5eMgYIF6u3+zVSDNWP9Vjf7HlxqpQ/4fw7+dX1wqiIed+ysJHvIlZ3w0JRj/pxEJSv/lQkHQa+W6P/xEBTodoBDAwhyKgMGioqKiqip///oqIt2qi////+v/2+6mp/rr3/4yDEIQ/0DiwAEAWsHOSVpVM0xZTRlJO1nYxbiDjnDAQ4EZXqJCFCBSkGov/29P/+tmluv/0//b///6/11obveYSfkNPQWTzZUg8NCbreDaKoykFjgprRxcI4Rs0wEsWXEhEkCyrICv/jIsQ8D9QWIAAAjbA8IC2q6q6+/f3p93f3//////9adRmv1SUiM+Z4Uzw/a7ejHTtSD3BOwNrsjp5MeYSIJhIGVQRI6kQg/DjSBRgyzh+Dcvqvb/n9/6fRf////9Nb5UvsVkYiCW7yNf/jIMRYD/QWIAAAjcyrYlVzUknC7yHfNAqoqh8qmWjM7AgLxqZVPTuyizJFA10IcmKEDokD6r//6zeb/1dDf////2/5ctjKUsx2MjiQr2fU40iTnGMVWa2o1HP/UlA1NDU0NLIa0iNs/+MixHMQFBYgAACTzNwbLmXoVkRETWRIwyhzyTAL/qv6on//qv//RVT6oi+xlVOzlTqi+5TFMIhIIiRBNC83P2+bLOzf/Zo0op2dnZ4jZqaNFCRIgmgtSRE44+LjUSRqTEFNRTMuMTAw/+MgxI4QvBYYAACTzKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr/4yLEphBsFcQAAU3Mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo="></audio>
<audio controls id="sonido2"></audio><audio controls id="sonido3"></audio><audio controls id="sonido4"></audio>
<button id="empezar">Empezar</button>
<p class="lead mb-0 typeit">Escrito fácil para funcionar... Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Aumentada la duración del recorte de sonido para que algunos navegadores (como Firefox) reproduzcan correctamente el sonido
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64
<audio autoplay id="sonido"
  src="data:audio/mpeg;base64,/+MgxAAPmN64HEBMdADBmgRg4EBZ7u6H3yBHgjfIfqN878Y1sQIFgMeYQWCFZ/sgxAAABMghYNQxgAD+kS1XHoAAAMFJYAbnoiIjuBgYGBgYPuKOKAmD+JwQBD4n5T9m6Xc9n/UCHE6/wfu+IBoYB9H9ajge/EDv+Tv/E4fnn2yAABrMwo3OV6rjtgLcWomj4hNsZ1n6Htm6fyLhWjwdESP9hpXoNrb/1O63INAxruUOdBr1vnDjYju8TeoeEBzls+ZOBf/7IsQDg8W0bwodgQAAAAA0gAAABFOEMi2yuqemjT94YE6i1FZLCJvetoDDiIQs9FHFHLGoChtQEmPhxj+qX/P9Lu4yLEHBWhlt5eMgYIF6u3+zVSDNWP9Vjf7HlxqpQ/WpmDARpWQzaf4fw7+dX1wqiIed+ysJHvIlZ3w0JRj/pxEJSv/QzqFAXBUNflQkHQa+W6P/5Y9xEBTodoBDAwhyKgMGioqKiqip///xLUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV">oqIt2qi////+v/2+6mp/rr3/4yDEIQ/0DiwAEAWsHOSVpVM0xZTRlJO1nYxbiDjnDAQ4EZXqJCFCBSkGov/29P/+tmluv/0//b///6/11obveYSfkNPQWTzZUg8NCbreDaKoykFjgprRxcI4Rs0wEsWXEhEkCyrICv/jIsQ8D9QWIAAAjbA8IC2q6q6+/f3p93f3//////9adRmv1SUiM+Z4Uzw/a7ejHTtSD3BOwNrsjp5MeYSIJhIGVQRI6kQg/DjSBRgyzh+Dcvqvb/n9/6fRf////9Nb5UvsVkYiCW7yNf/jIMRYD/QWIAAAjcyrYlVzUknC7yHfNAqoqh8qmWjM7AgLxqZVPTuyizJFA10IcmKEDokD6r//6zeb/1dDf////2/5ctjKUsx2MjiQr2fU40iTnGMVWa2o1HP/UlA1NDU0NLIa0iNs/+MixHMQFBYgAACTzNwbLmXoVkRETWRIwyhzyTAL/qv6on//qv//RVT6oi+xlVOzlTqi+5TFMIhIIiRBNC83P2+bLOzf/Zo0op2dnZ4jZqaNFCRIgmgtSRE44+LjUSRqTEFNRTMuMTAw/+MgxI4QvBYYAACTzKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr/4yLEphBsFcQAAU3Mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo=">
</audio>
/* Precargamos el elemento de sonido y creamos un grupo de 4 sonidos simultáneos */
let sonido = [
  document.getElementById('sonido1'),
  document.getElementById('sonido2'),
  document.getElementById('sonido3'),
  document.getElementById('sonido4'),
];
/* Copiamos el sonido */
sonido[1].src = sonido[0].src;
sonido[2].src = sonido[0].src;
sonido[3].src = sonido[0].src;

/* La animación comenzará tras pulsar en el botón */
document.getElementById('empezar').addEventListener('click', typeItOut);

// Efecto para escritura, se llama como typeit en el estilo
/* Ya que el sonido requiere de interacción con la página,
  esperamos a que el usuario pulse en el botón para comenzar */
//typeItOut();

function typeItOut(){
  var els   = [];
  var intID = 0;
  var init  = _init();

  function _init() {
    $('.typeit').each(function(index, el){
      var target = $(el);
      var string = target.text();
      $(el).text('');
      els.push({
        target : target,
        string : string
      });
    });
    intID = setInterval(typeLetters, 80);
  }
  
  function typeLetters(){
    /* Aleatoriamente descansamos de teclear un 60% de las veces */
    if (Math.random() > 0.4) {
        return;
    }

    /* Si hemos llegado al final del texto finalizamos */
    if(els.length <= 0) clearInterval(intID);
    
    for(var i in els){
      var target = els[i].target;
      var text   = els[i].string.substring(0, target.text().length + 1);
      target.text( text );

      /* Reproducimos el sonido rotando entre los 4 reproductores */
      sonido[text.length % 4].play();

      if(els[i].string.length == text.length) {
        els.splice(i, 1);
      }
    }
  }
}
body {
    background: #000460;
    color: #48ABF3;
    font-family: 'VT323', monospace;
}
audio { display: none; }
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
<audio autoplay controls id="sonido1" src="data:audio/mpeg;base64,/+MgxAAPmN64HEBMdADBmgRg4EBZ7u6H3yBHgjfIfqN878Y1sQIFgMeYQWCFZ/5T9m6Xc9n/sgxAAABMghYNQxgAD+kS1XHoAAAMFJYAbnoiIjuBgYGBgYPuKOKAmD+JwQBD4nE6/UCHu+IBoYB9H9ajge/wf+Tv/EDv/E4fnn2yAABrMwo3OV6rjtgLcWomj4hNsZ1n6Htm6fyLhWjwdESP9hpXoNrb/1O63INAxruUOdBr1vnDjYju8TeoeEBzls+ZOBf94YE6i1FZLCJvetoDDiIQs9FHFHLGoChtQEmPhxj+qX/7IsQDg8W0bwodgQAAAAA0gAAABFOEMi2yuqemjT4yLEHBWhlt5eMgYIF6u3+zVSDNWP9Vjf7HlxqpQ/P9Lu4fw7+dX1wqiIed+ysJHvIlZ3w0JRj/WpmDARpWQzafpxEJSv/lQkHQa+W6P/QzqFAXBUNfxEBTodoBDAwhyKgMGioqKiqip/5Y9//oqIt2qi/xLUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV"><///+v/2+6mp/rr3/4yDEIQ/0DiwAEAWsHOSVpVM0xZTRlJO1nYxbiDjnDAQ4EZXqJCFCBSkGov/29P/+tmluv/0//b///6/11obveYSfkNPQWTzZUg8NCbreDaKoykFjgprRxcI4Rs0wEsWXEhEkCyrICv/jIsQ8D9QWIAAAjbA8IC2q6q6+/f3p93f3//////9adRmv1SUiM+Z4Uzw/a7ejHTtSD3BOwNrsjp5MeYSIJhIGVQRI6kQg/DjSBRgyzh+Dcvqvb/n9/6fRf////9Nb5UvsVkYiCW7yNf/jIMRYD/QWIAAAjcyrYlVzUknC7yHfNAqoqh8qmWjM7AgLxqZVPTuyizJFA10IcmKEDokD6r//6zeb/1dDf////2/5ctjKUsx2MjiQr2fU40iTnGMVWa2o1HP/UlA1NDU0NLIa0iNs/+MixHMQFBYgAACTzNwbLmXoVkRETWRIwyhzyTAL/qv6on//qv//RVT6oi+xlVOzlTqi+5TFMIhIIiRBNC83P2+bLOzf/Zo0op2dnZ4jZqaNFCRIgmgtSRE44+LjUSRqTEFNRTMuMTAw/+MgxI4QvBYYAACTzKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr/4yLEphBsFcQAAU3Mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo="></audio>
<audio autoplay controls id="sonido2"></audio><audio autoplay controls id="sonido3"></audio><audio autoplay controls id="sonido4"></audio>
<button id="empezar">Empezar</button>
<p class="lead mb-0 typeit">Escrito fácil para funcionar... Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio autoplay id="sonido"
  src="data:audio/mpeg;base64,//sgxAAABMghYNQxgAD+kS1XHoAAAMFJYAbnoiIjuBgYGBgYPuKOKAmD+JwQBD4n/UCH/wf/EDv/E4fnn2yAABrMwo3OV6rjtgLcWomj4hNsZ1n6Htm6fyLhWjwdESP9hpXoNrb/1O63INAxruUOdBr1vnDjYju8TeoeEBzls+ZOBf/7IsQDg8W0bwodgQAAAAA0gAAABFOEMi2yuqemjT/P9Lu/WpmDARpWQzaf//QzqFAXBUNf/5Y9///xLUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV">
</audio>
/* Precargamos el elemento de sonido y creamos un grupo de 4 sonidos simultáneos */
let sonido = [
  document.getElementById('sonido1'),
  document.getElementById('sonido2'),
  document.getElementById('sonido3'),
  document.getElementById('sonido4'),
];
/* Copiamos el sonido */
sonido[1].src = sonido[0].src;
sonido[2].src = sonido[0].src;
sonido[3].src = sonido[0].src;

/* La animación comenzará tras pulsar en el botón */
document.getElementById('empezar').addEventListener('click', typeItOut);

// Efecto para escritura, se llama como typeit en el estilo
/* Ya que el sonido requiere de interacción con la página,
  esperamos a que el usuario pulse en el botón para comenzar */
//typeItOut();

function typeItOut(){
  var els   = [];
  var intID = 0;
  var init  = _init();

  function _init() {
    $('.typeit').each(function(index, el){
      var target = $(el);
      var string = target.text();
      $(el).text('');
      els.push({
        target : target,
        string : string
      });
    });
    intID = setInterval(typeLetters, 80);
  }
  
  function typeLetters(){
    /* Aleatoriamente descansamos de teclear un 60% de las veces */
    if (Math.random() > 0.4) {
        return;
    }

    /* Si hemos llegado al final del texto finalizamos */
    if(els.length <= 0) clearInterval(intID);
    
    for(var i in els){
      var target = els[i].target;
      var text   = els[i].string.substring(0, target.text().length + 1);
      target.text( text );

      /* Reproducimos el sonido rotando entre los 4 reproductores */
      sonido[text.length % 4].play();

      if(els[i].string.length == text.length) {
        els.splice(i, 1);
      }
    }
  }
}
body {
    background: #000460;
    color: #48ABF3;
    font-family: 'VT323', monospace;
}
audio { display: none; }
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
<audio autoplay controls id="sonido1" src="data:audio/mpeg;base64,//sgxAAABMghYNQxgAD+kS1XHoAAAMFJYAbnoiIjuBgYGBgYPuKOKAmD+JwQBD4n/UCH/wf/EDv/E4fnn2yAABrMwo3OV6rjtgLcWomj4hNsZ1n6Htm6fyLhWjwdESP9hpXoNrb/1O63INAxruUOdBr1vnDjYju8TeoeEBzls+ZOBf/7IsQDg8W0bwodgQAAAAA0gAAABFOEMi2yuqemjT/P9Lu/WpmDARpWQzaf//QzqFAXBUNf/5Y9///xLUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV"></audio>
<audio autoplay controls id="sonido2"></audio><audio autoplay controls id="sonido3"></audio><audio autoplay controls id="sonido4"></audio>
<button id="empezar">Empezar</button>
<p class="lead mb-0 typeit">Escrito fácil para funcionar... Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio autoplay id="sonido"
  src="data:audio/mpeg;base64,/+MgxAAPmN64HEBMdADBmgRg4EBZ7u6H3yBHgjfIfqN878Y1sQIFgMeYQWCFZ/5T9m6Xc9n/E6/u+IBoYB9H9ajge/+Tv///94YE6i1FZLCJvetoDDiIQs9FHFHLGoChtQEmPhxj+qX/4yLEHBWhlt5eMgYIF6u3+zVSDNWP9Vjf7HlxqpQ/4fw7+dX1wqiIed+ysJHvIlZ3w0JRj/pxEJSv/lQkHQa+W6P/xEBTodoBDAwhyKgMGioqKiqip///oqIt2qi////+v/2+6mp/rr3/4yDEIQ/0DiwAEAWsHOSVpVM0xZTRlJO1nYxbiDjnDAQ4EZXqJCFCBSkGov/29P/+tmluv/0//b///6/11obveYSfkNPQWTzZUg8NCbreDaKoykFjgprRxcI4Rs0wEsWXEhEkCyrICv/jIsQ8D9QWIAAAjbA8IC2q6q6+/f3p93f3//////9adRmv1SUiM+Z4Uzw/a7ejHTtSD3BOwNrsjp5MeYSIJhIGVQRI6kQg/DjSBRgyzh+Dcvqvb/n9/6fRf////9Nb5UvsVkYiCW7yNf/jIMRYD/QWIAAAjcyrYlVzUknC7yHfNAqoqh8qmWjM7AgLxqZVPTuyizJFA10IcmKEDokD6r//6zeb/1dDf////2/5ctjKUsx2MjiQr2fU40iTnGMVWa2o1HP/UlA1NDU0NLIa0iNs/+MixHMQFBYgAACTzNwbLmXoVkRETWRIwyhzyTAL/qv6on//qv//RVT6oi+xlVOzlTqi+5TFMIhIIiRBNC83P2+bLOzf/Zo0op2dnZ4jZqaNFCRIgmgtSRE44+LjUSRqTEFNRTMuMTAw/+MgxI4QvBYYAACTzKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr/4yLEphBsFcQAAU3Mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo=">
</audio>
/* Precargamos el elemento de sonido y creamos un grupo de 4 sonidos simultáneos */
let sonido = [
  document.getElementById('sonido1'),
  document.getElementById('sonido2'),
  document.getElementById('sonido3'),
  document.getElementById('sonido4'),
];
/* Copiamos el sonido */
sonido[1].src = sonido[0].src;
sonido[2].src = sonido[0].src;
sonido[3].src = sonido[0].src;

/* La animación comenzará tras pulsar en el botón */
document.getElementById('empezar').addEventListener('click', typeItOut);

// Efecto para escritura, se llama como typeit en el estilo
/* Ya que el sonido requiere de interacción con la página,
  esperamos a que el usuario pulse en el botón para comenzar */
typeItOut();

function typeItOut(){
  var els   = [];
  var intID = 0;
  var init  = _init();

  function _init() {
    $('.typeit').each(function(index, el){
      var target = $(el);
      var string = target.text();
      $(el).text('');
      els.push({
        target : target,
        string : string
      });
    });
    intID = setInterval(typeLetters, 80);
  }
  
  function typeLetters(){
    /* Aleatoriamente descansamos de teclear un 60% de las veces */
    if (Math.random() > 0.4) {
        return;
    }

    /* Si hemos llegado al final del texto finalizamos */
    if(els.length <= 0) clearInterval(intID);
    
    for(var i in els){
      var target = els[i].target;
      var text   = els[i].string.substring(0, target.text().length + 1);
      target.text( text );

      /* Reproducimos el sonido rotando entre los 4 reproductores */
      sonido[text.length % 4].play();

      if(els[i].string.length == text.length) {
        els.splice(i, 1);
      }
    }
  }
}
body {
    background: #000460;
    color: #48ABF3;
    font-family: 'VT323', monospace;
}
audio { display: none; }
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
<audio controls id="sonido1" src="data:audio/mpeg;base64,/+MgxAAPmN64HEBMdADBmgRg4EBZ7u6H3yBHgjfIfqN878Y1sQIFgMeYQWCFZ/5T9m6Xc9n/E6/u+IBoYB9H9ajge/+Tv///94YE6i1FZLCJvetoDDiIQs9FHFHLGoChtQEmPhxj+qX/4yLEHBWhlt5eMgYIF6u3+zVSDNWP9Vjf7HlxqpQ/4fw7+dX1wqiIed+ysJHvIlZ3w0JRj/pxEJSv/lQkHQa+W6P/xEBTodoBDAwhyKgMGioqKiqip///oqIt2qi////+v/2+6mp/rr3/4yDEIQ/0DiwAEAWsHOSVpVM0xZTRlJO1nYxbiDjnDAQ4EZXqJCFCBSkGov/29P/+tmluv/0//b///6/11obveYSfkNPQWTzZUg8NCbreDaKoykFjgprRxcI4Rs0wEsWXEhEkCyrICv/jIsQ8D9QWIAAAjbA8IC2q6q6+/f3p93f3//////9adRmv1SUiM+Z4Uzw/a7ejHTtSD3BOwNrsjp5MeYSIJhIGVQRI6kQg/DjSBRgyzh+Dcvqvb/n9/6fRf////9Nb5UvsVkYiCW7yNf/jIMRYD/QWIAAAjcyrYlVzUknC7yHfNAqoqh8qmWjM7AgLxqZVPTuyizJFA10IcmKEDokD6r//6zeb/1dDf////2/5ctjKUsx2MjiQr2fU40iTnGMVWa2o1HP/UlA1NDU0NLIa0iNs/+MixHMQFBYgAACTzNwbLmXoVkRETWRIwyhzyTAL/qv6on//qv//RVT6oi+xlVOzlTqi+5TFMIhIIiRBNC83P2+bLOzf/Zo0op2dnZ4jZqaNFCRIgmgtSRE44+LjUSRqTEFNRTMuMTAw/+MgxI4QvBYYAACTzKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqr/4yLEphBsFcQAAU3Mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo="></audio>
<audio controls id="sonido2"></audio><audio controls id="sonido3"></audio><audio controls id="sonido4"></audio>
<button id="empezar">Empezar</button>
<p class="lead mb-0 typeit">Escrito fácil para funcionar... Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Mejora para crear agrupación de reproductores
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64
/* Precargamos el elemento de sonido y creamos un grupo de 4 sonidos simultáneos */
let sonido = [
  document.getElementById('sonido''sonido1');,
  document.getElementById('sonido2'),
  document.getElementById('sonido3'),
  document.getElementById('sonido4'),
];
/* Copiamos el sonido */
sonido[1].src = sonido[0].src;
sonido[2].src = sonido[0].src;
sonido[3].src = sonido[0].src;

/* La animación comenzará tras pulsar en el botón */
document.getElementById('empezar').addEventListener('click', typeItOut);

// Efecto para escritura, se llama como typeit en el estilo
/* Ya que el sonido requiere de interacción con la página,
  esperamos a que el usuario pulse en el botón para comenzar */
//typeItOut();

function typeItOut(){
  var els   = [];
  var intID = 0;
  var init  = _init();

  function _init() {
    $('.typeit').each(function(index, el){
      var target = $(el);
      var string = target.text();
      $(el).text('');
      els.push({
        target : target,
        string : string
      });
    });
    intID = setInterval(typeLetters, 10080);
  }
  
  function typeLetters(){
    /* Aleatoriamente descansamos de teclear un 60% de las veces */
    if (Math.random() > 0.64) {
        return;
    }
    /* Reproducimos el sonido */
    sonido.play();

    /* Si hemos llegado al final del texto finalizamos */
    if(els.length <= 0) clearInterval(intID);
    
    for(var i in els){
      var target = els[i].target;
      var text   = els[i].string.substring(0, target.text().length + 1);
      target.text( text ); 

      /* Reproducimos el sonido rotando entre los 4 reproductores */
      sonido[text.length % 4].play();

      if(els[i].string.length == text.length) {
        els.splice(i, 1);
      }
    }
  }
}
body {
    background: #000460;
    color: #48ABF3;
    font-family: 'VT323', monospace;
}
audio { display: none; }
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
<audio autoplay controls id="sonido"id="sonido1" src="data:audio/mpeg;base64,//sgxAAABMghYNQxgAD+kS1XHoAAAMFJYAbnoiIjuBgYGBgYPuKOKAmD+JwQBD4n/UCH/wf/EDv/E4fnn2yAABrMwo3OV6rjtgLcWomj4hNsZ1n6Htm6fyLhWjwdESP9hpXoNrb/1O63INAxruUOdBr1vnDjYju8TeoeEBzls+ZOBf/7IsQDg8W0bwodgQAAAAA0gAAABFOEMi2yuqemjT/P9Lu/WpmDARpWQzaf//QzqFAXBUNf/5Y9///xLUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV"></audio>
<audio autoplay controls id="sonido2"></audio><audio autoplay controls id="sonido3"></audio><audio autoplay controls id="sonido4"></audio>
<button id="empezar">Empezar</button>
<p class="lead mb-0 typeit">Escrito facilfácil para funcarfuncionar... Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Edición: Debido a que solo se puede reproducir un sonido simultáneamente en una etiqueta <audio>, he hecho una modificación para crear un grupo de cuatro reproductores que reproducen el mismo sonido, pero se van rotando a la hora de reproducir cada pulsación para sonar de manera más realista.

/* Precargamos el elemento de sonido */
let sonido = document.getElementById('sonido');
/* La animación comenzará tras pulsar en el botón */
document.getElementById('empezar').addEventListener('click', typeItOut);

// Efecto para escritura, se llama como typeit en el estilo
/* Ya que el sonido requiere de interacción con la página,
  esperamos a que el usuario pulse en el botón para comenzar */
//typeItOut();

function typeItOut(){
  var els   = [];
  var intID = 0;
  var init  = _init();

  function _init() {
    $('.typeit').each(function(index, el){
      var target = $(el);
      var string = target.text();
      $(el).text('');
      els.push({
        target : target,
        string : string
      });
    });
    intID = setInterval(typeLetters, 100);
  }
  
  function typeLetters(){
    /* Aleatoriamente descansamos de teclear */
    if (Math.random() > 0.6) {
        return;
    }
    /* Reproducimos el sonido */
    sonido.play();

    /* Si hemos llegado al final del texto finalizamos */
    if(els.length <= 0) clearInterval(intID);
    
    for(var i in els){
      var target = els[i].target;
      var text   = els[i].string.substring(0, target.text().length + 1);
      target.text( text );
      if(els[i].string.length == text.length) {
        els.splice(i, 1);
      }
    }
  }
}
body {
    background: #000460;
    color: #48ABF3;
    font-family: 'VT323', monospace;
}
audio { display: none; }
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
<audio autoplay controls id="sonido" src="data:audio/mpeg;base64,//sgxAAABMghYNQxgAD+kS1XHoAAAMFJYAbnoiIjuBgYGBgYPuKOKAmD+JwQBD4n/UCH/wf/EDv/E4fnn2yAABrMwo3OV6rjtgLcWomj4hNsZ1n6Htm6fyLhWjwdESP9hpXoNrb/1O63INAxruUOdBr1vnDjYju8TeoeEBzls+ZOBf/7IsQDg8W0bwodgQAAAAA0gAAABFOEMi2yuqemjT/P9Lu/WpmDARpWQzaf//QzqFAXBUNf/5Y9///xLUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV"></audio>
<button id="empezar">Empezar</button>
<p class="lead mb-0 typeit">Escrito facil para funcar... Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
/* Precargamos el elemento de sonido y creamos un grupo de 4 sonidos simultáneos */
let sonido = [
  document.getElementById('sonido1'),
  document.getElementById('sonido2'),
  document.getElementById('sonido3'),
  document.getElementById('sonido4'),
];
/* Copiamos el sonido */
sonido[1].src = sonido[0].src;
sonido[2].src = sonido[0].src;
sonido[3].src = sonido[0].src;

/* La animación comenzará tras pulsar en el botón */
document.getElementById('empezar').addEventListener('click', typeItOut);

// Efecto para escritura, se llama como typeit en el estilo
/* Ya que el sonido requiere de interacción con la página,
  esperamos a que el usuario pulse en el botón para comenzar */
//typeItOut();

function typeItOut(){
  var els   = [];
  var intID = 0;
  var init  = _init();

  function _init() {
    $('.typeit').each(function(index, el){
      var target = $(el);
      var string = target.text();
      $(el).text('');
      els.push({
        target : target,
        string : string
      });
    });
    intID = setInterval(typeLetters, 80);
  }
  
  function typeLetters(){
    /* Aleatoriamente descansamos de teclear un 60% de las veces */
    if (Math.random() > 0.4) {
        return;
    }

    /* Si hemos llegado al final del texto finalizamos */
    if(els.length <= 0) clearInterval(intID);
    
    for(var i in els){
      var target = els[i].target;
      var text   = els[i].string.substring(0, target.text().length + 1);
      target.text( text ); 

      /* Reproducimos el sonido rotando entre los 4 reproductores */
      sonido[text.length % 4].play();

      if(els[i].string.length == text.length) {
        els.splice(i, 1);
      }
    }
  }
}
body {
    background: #000460;
    color: #48ABF3;
    font-family: 'VT323', monospace;
}
audio { display: none; }
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
<audio autoplay controls id="sonido1" src="data:audio/mpeg;base64,//sgxAAABMghYNQxgAD+kS1XHoAAAMFJYAbnoiIjuBgYGBgYPuKOKAmD+JwQBD4n/UCH/wf/EDv/E4fnn2yAABrMwo3OV6rjtgLcWomj4hNsZ1n6Htm6fyLhWjwdESP9hpXoNrb/1O63INAxruUOdBr1vnDjYju8TeoeEBzls+ZOBf/7IsQDg8W0bwodgQAAAAA0gAAABFOEMi2yuqemjT/P9Lu/WpmDARpWQzaf//QzqFAXBUNf/5Y9///xLUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV"></audio>
<audio autoplay controls id="sonido2"></audio><audio autoplay controls id="sonido3"></audio><audio autoplay controls id="sonido4"></audio>
<button id="empezar">Empezar</button>
<p class="lead mb-0 typeit">Escrito fácil para funcionar... Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Edición: Debido a que solo se puede reproducir un sonido simultáneamente en una etiqueta <audio>, he hecho una modificación para crear un grupo de cuatro reproductores que reproducen el mismo sonido, pero se van rotando a la hora de reproducir cada pulsación para sonar de manera más realista.

Cambiado el sonido por un recorte del vídeo proporcionado
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64
Loading
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64
Loading