Lo que necesitas es crear un elemento de audio que reproduzca un sonido en cada "pulsación" de teclado:
<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) { }
Si tratamos de hacer sonar ese sonido desde javascript, nos indicará que necesitamos interacción previa con el navegador para que se reproduzca el sonido, por lo que he creado un botón al que le he asignado la tarea de comenzar la reproducción del efecto (además, he ocultado el control de audio mediante CSS para que no se vea en el documento).
Por último, he reproducido el sonido de manera aleatoria en vez de constante para evitar que se vuelta monótono el sonido:
/* 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>
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.