auto-type sound

HTML & JS

String.prototype.charAt(idx) => idx에 해당하는 문자열 반환

idx가 문자열 길이보다 작으면 추가해주고
idx가 문자열과 같아질 때, 초기화

<div class="text"></div>

  <script>
    let textDiv = document.querySelector('.text');
    let text = 'This message is being typed on a typewriter.';
    let i = 0;

    function type () {
      if (i < text.length) {
        textDiv.innerHTML += text.charAt(i);
        // let audio = new Audio('링크');
        // audio.play();
        i++;
        setTimeout(type, Math.floor(Math.random() * 600) + 1);
      } else if (i == text.length) {
        i = 0;
        textDiv.innerHTML = '';
        setTimeout(type, Math.floor(Math.random() * 600) + 1);
      }
    }

    type();

  </script>

CSS

html {
  width: 100%;
  height: 100vh;
}

body {
  /* background: url(./...); */
  /* background-size: cover; */
  background-color: black;
}

.text {
  position: absolute;
  font-size: 1.8rem;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%); 
  color: white;
}

참고

Vanilla JavaScript Typewriter Effect