Javascript, can this be done?

Factual Questions
1

In JavaScript, I have a requirement where text is to appear on the web page delaying each character by X number of milliseconds to simulate it was typed by a person in real-time. With this, they want the sound of a typewriter to be triggered as each key-stroke appears on the web page. I’m not sure if JavaScript can trigger an audio file repeatedly like this so it would match as each character is displayed on the web page?

Is it possible in JavaScript to do this, so as each character appears it will be in sync with the audio file which would contain the sound of a single typewriter key being hit? Also, anyone have any code examples of this working successfully?

My backup plan is to trigger a sound file which is of a typewriter while the text is being displayed by delay one character at a time. I know this isn’t ideal, but I wanted to ask to see if any experienced JavaScript programmers know the solution to this.

And before anyone asks, they don’t want Flash/Action Script. And want something so it works for any user out of the box.

2

Check out this thread over on stack exchange: html5 - Play audio in javascript with a good performance - Game Development Stack Exchange

For the timing, if you include the playback portion within the loop that displays each keystroke, you shouldn’t have any issues with synch’ing animation and sound.

btw, I’m not a programmer, more into the hardware and systems side.

3

Any user with a modern browser, I suppose, because the whole reason people used Flash to begin with was because browsers before the modern era didn’t have things like built-in audio players. You resorted to a plugin or you embedded the audio file in the hopes that the person had an external audio player set up to play the file automatically.

As dstarfire said, it’s possible to keep the keystrokes and the audio synchronized, but beyond that it’s completely up in the air.

4

Thanks! That’s a very good idea. I didn’t think about game development to have answers.

5

Sounds like fun! Don’t forget to introduce some timing variations: make the delays 80, 65, 110, 60, 70, 135, 110 instead of 100, 100, 100, 100, 100.

6

Anything you want to do in javascript, someone has probably already done it and made it open source.

Check out example 3 here, complete with sound effects:

7

Good idea! A random number generator within a range could do this.

8

Thanks! This looks promising. I tested Example 3 on Google Chrome and Firefox, and it worked fine, but it doesn’t on the Safari browser. You only hear one keystroke for about every 5 characters.

I tried it on the iPhone, and while it does print the next like it does on a Desktop, there is no sound with it.

9

Maybe it try it with an .ogg or .m4a file?

10

Actually, maybe it’s something Apple designed on purpose to prevent autoplay audio:

https://www.ibm.com/developerworks/library/wa-ioshtml5/

11

Played around with it and it seems like Safari desktop can only play one audio file at a time, so if a new keystroke is starting before the last one is finished, it’ll sound weird (getting cut off).

Play around with the delays (the random duration is built into the setDelay function) and see if that helps?

I don’t have an iPhone to test with, so can’t help you there. But supposedly it has to be user-initiated because Apple knows better. Maybe tie it to a touch or scroll event?

12

I’m a Javascript novice but I decided to download the* js-typewriter* package just for fun. If I access it from a server with http: it works fine. However if I access it directly from my laptop with file: it doesn’t work at all: Two examples just display all white; another all black. (AFAIK I can’t access my laptop with http: since it’s not configured to be a server.)

The problem isn’t file misarrangement — the laptop and server versions came from the same tarball. I have successfully executed javascripts via file: before. (I also observed a file:javascript failure before: A webcam script works on Firefox but not chrome. But this typing package fails (as file: ) under both Firefox and Chrome.)

I hope the above is clear. :o Can anyone guess what the problem is? I’m afraid I have some deep-rooted ignorance. :eek:

13

By “server version” do you mean you’re running the demo from the developer’s own page, or did you download it and then reupload to a server under your own control?

For example, I found that the downloaded package includes a broken link to jQuery (a JavaScript library) and had to be updated to a new link like https://code.jquery.com/jquery-1.12.4.min.js

Beyond that, push Ctrl-Shift-J (if you’re using Chrome) to open the JS developer’s console and then refresh the file:// version of that page. It should tell you what the error(s) are.

14

Yes.

Thanks for the tip. With it, I quickly identified the problem. The html has two lines with file names like
<script src=“//code.jquery.com/jquery-1.10.1.min.js”>

The fix was to place ‘http:’ in front of the ‘//code’. Without this the file location defaults to ‘file:’ (when the source is file:, I guess)

That was quick turnaround, Reply ! Thanks again. I’ll have to ask similar questions more often (if I can overcome embarrassment about my own lack of skill :o ).

15

Ah, thanks for catching that! I actually didn’t realize the protocol-relative links (normally used to bypass http vs https issues) have a problem with file:// URLs. Makes sense.

PS - of course you’re always welcome to ask questions here, but Stackoverflow is probably a better (more specialized) forum for that.