Typewriter "clack"

JavaScript
1

I’ve been looking at several variations of how to do the typewriter effect, a few in just CSS even and seem to be favoring this one, partly because it avoids adding a library, but may need to add jquery for it’s accordion anyway and as far as I know CSS doesn’t have audio hooks even in css3, so my real question is, does anyone have a suggestion on how to add an antique “clack” per key stroke. We can record a short audio clip and clean up the white noise, but I want it to make a noise once per letter to add to the effect… http://codepen.io/voronianski/pen/aicwk

2

Just found this one that should have the audio and it’s jquery so should also be compatible with accordion. Still interested in further thoughts and elaborations… http://www.codeproject.com/Tips/811921/jQuery-Typewriter-Effect-on-HTML-Text

3

jQuery:

var clack = new Audio('clack.mp3');

$(document).keyup(function() {
    clack.play();
});

Here’s a demo… find a better sound of course

Edit:

hmm… that waits till the sound stops playing before the next one… not sure how to fix that off the top of my head.

4

That works but seems to skip every other keyup. Any idea why?

5

Yeah, it seems to be waiting for the sound to stop. That sound has a long pause at the end. (see my edit)

6

Hmm, a 5.22K 1 second file doesn’t seem like it would take that much time. But that indeed appears to be the reason.

7

Interesting… but not quite what I had in mind. I already have the text preset, it’s not something that the user will type in… but it should look and sound like someone is typing it for them.

8

You’re just wanting sound effects then. From your first example, throw a sound in there.

function typeWriter(text, n) {
  if (n < (text.length)) {
    clack.play(); //here
    $('.test').html(text.substring(0, n+1));
    n++;
    setTimeout(function() {
      typeWriter(text, n)
    }, 100);
  }
}
9

Speaking of sound effects, Tom Hanks has a thing for typewriters and has created the Hanks writer app (video) that very nicely simulates a typewriter. I plan to use it to annoy people when I’m taking notes :laughing:

2 Likes
10

I actually just bought my first Mechanical Keyboard a couple weeks ago actually. :smile: With “clicky” Cherry MX Blues.

Ducky Shine 4 It’s really high quality and it’s pretty solid construction. The ship weight was 4lbs.

I’m probably going to get a Ducky Zero (no lighting effects) with Brown switches for work, which are just like the Blues, but without the “click”.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.