3

Tengo este script que hace la animación de texto como si fuera una terminal tonta. Necesito ver cómo integrar sonido cada vez que escriba una letra tal así como suena el commodore BASIC o el Atari BASIC.

El código original es TypeIt - Javascript typewriter effect de Tom Dyer. Ojalá alguien sepa, ya que en la actualidad no suena, solo hace la animación, lo cual no es malo, pero sería genial que tuviese sonido.

$(document).ready(function () {
// Efecto para escritura, se llama como typeit en el estilo
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(){
    
    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;
}
<!DOCTYPE html>
<html>

<head>
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
</head>
<body>
<p class="lead mb-0 typeit">Escito 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>
</body>

</html>

Si bien se entiende que cada vez que se escriba tenga la fuente un tono, me refiero a emular esto alguien escribiendo un pequeño programa en basic de Atari por lo mismo es necesario el bep que suena en cada fuente es único y solo se repite... de hecho el audio se llama type.ogg, pero repito no se como unirlo a la función y lamentablemente no debería ser a través de un triger, ya que se perdería el efecto de escritura automática.

1
  • Podrías hacer uso de librerías como tone.js o detonar un sonido de typing por cada tecla. Creo que te podría servir este ejemplo. Saludos
    – Malva
    Commented el 10 feb. 2020 a las 16:02

1 respuesta 1

3

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.

10
  • lamentablemente no me funciono, pero mas aun, la idea original no consiste en poner un botón para hacer que funcione, lamentablemente Commented el 14 feb. 2020 a las 2:42
  • 1
    ¿Qué es lo que "no te funcionó"? ¿Podrías dar más detalles para ayudarte a solucionarlo? He editado la respuesta para que reproduzca automáticamente la animación y he aumentado la duración del sonido para solucionar un problema con el navegador Firefox, aunque en ciertos navegadores (como Chrome) no sonará el sonido hasta que pulses el botón. Commented el 14 feb. 2020 a las 8:25
  • 1
    Debes pensar, que algunos navegadores (por ejemplo, Chrome) han implementado recientemente protecciones que impiden generar un sonido sin interacción previa con la página, produciendo una excepción con el mensaje play() failed because the user didn't interact with the document first. Puedes reproducir la animación automáticamente, pero no sonará ningún sonido a través de ningún elemento si previamente no se ha producido una interacción con la página. No puedes saltarte esa protección, por lo que los usuarios de esos navegadores no escucharán nada. Commented el 14 feb. 2020 a las 8:26
  • ya con la explicación que me diste (incluso con el tema de poner un botón para iniciar la animación... que es justamente lo contrario lo que se desea). Me quedo claro que entonces no se usara sonido.... ademas, no me funciono, ya que se bloquea al incluirlo con otras funciones de la pagina, eso. y gracias por la ayuda Commented el 14 feb. 2020 a las 21:51
  • 1
    Con el último ejemplo funciona sin pulsar el botón, aunque no sonará en ciertos navegadores hasta que no interactúes con la página. En cuanto al problema que no te funciona junto con otras cosas, si compartes el código podría ayudarte. Commented el 15 feb. 2020 a las 0:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.