Skip to main content
título editado
Enlace

¿Cómo puedepuedo integrar un sonido a un efecto de texto que emula terminal?

se añadieron 98 caracteres en el cuerpo
Origen Enlace
$(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>
// 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>
$(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>
se añadieron 98 caracteres en el cuerpo
Origen Enlace

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 bipbep que tienensuena en cada fuente al escribirsees ú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.

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 bip que tienen cada fuente al escribirse, lamentablemente no debería ser a través de un triger, ya que se perdería el efecto de escritura automática.

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.

se añadieron 112 caracteres en el cuerpo
Origen Enlace
Loading
Agregado contenido de la respuesta (que, en realidad, es una ampliación de los datos de la pregunta)
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64
Loading
Reestructurado título y pregunta
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64
Loading
Origen Enlace
Loading