# Javascript, can this be done?

**URL:** <https://boards.straightdope.com/t/javascript-can-this-be-done/796269>\
**Category:** Factual Questions\
**Created:** [September 13, 2017, 8:09pm UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269 "2017-09-13T20:09:09Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![edwardcoast](https://avatars.discourse-cdn.com/v4/letter/e/cab0a1/32.png) [@edwardcoast](https://boards.straightdope.com/u/edwardcoast)\
**Post date:** [September 13, 2017, 8:09pm UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/1 "2017-09-13T20:09:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dstarfire](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/dstarfire/32/5762_2.png) [@dstarfire](https://boards.straightdope.com/u/dstarfire)\
**Post date:** [September 13, 2017, 8:45pm UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/2 "2017-09-13T20:45:56Z")

</div>

Check out this thread over on stack exchange: [html5 - Play audio in javascript with a good performance - Game Development Stack Exchange](https://gamedev.stackexchange.com/questions/60139/play-audio-in-javascript-with-a-good-performance)

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.

---

<div class="post-metadata">

**Author:** ![Derleth](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@Derleth](https://boards.straightdope.com/u/Derleth)\
**Post date:** [September 13, 2017, 9:04pm UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/3 "2017-09-13T21:04:40Z")

</div>

> [@edwardcoast](#):
>
> And before anyone asks, they don’t want Flash/Action Script. And want something so it works for any user out of the box.

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.

---

<div class="post-metadata">

**Author:** ![edwardcoast](https://avatars.discourse-cdn.com/v4/letter/e/cab0a1/32.png) [@edwardcoast](https://boards.straightdope.com/u/edwardcoast)\
**Post date:** [September 13, 2017, 9:58pm UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/4 "2017-09-13T21:58:28Z")

</div>

> [@dstarfire](#):
>
> Check out this thread over on stack exchange: [html5 - Play audio in javascript with a good performance - Game Development Stack Exchange](https://gamedev.stackexchange.com/questions/60139/play-audio-in-javascript-with-a-good-performance)
> 
> 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.

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

---

<div class="post-metadata">

**Author:** ![septimus](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/septimus/32/410_2.png) [@septimus](https://boards.straightdope.com/u/septimus)\
**Post date:** [September 14, 2017, 12:04am UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/5 "2017-09-14T00:04:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [September 14, 2017, 1:58am UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/6 "2017-09-14T01:58:51Z")

</div>

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:

> **[GitHub - mehaase/js-typewriter: Simulate a person typing in a DOM node.](https://github.com/mehaase/js-typewriter)**
>
> Simulate a person typing in a DOM node. Contribute to mehaase/js-typewriter development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![edwardcoast](https://avatars.discourse-cdn.com/v4/letter/e/cab0a1/32.png) [@edwardcoast](https://boards.straightdope.com/u/edwardcoast)\
**Post date:** [September 14, 2017, 2:28am UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/7 "2017-09-14T02:28:23Z")

</div>

> [@septimus](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![edwardcoast](https://avatars.discourse-cdn.com/v4/letter/e/cab0a1/32.png) [@edwardcoast](https://boards.straightdope.com/u/edwardcoast)\
**Post date:** [September 14, 2017, 3:57am UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/8 "2017-09-14T03:57:43Z")

</div>

> [@Reply](#):
>
> 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:
> 
> [GitHub - mehaase/js-typewriter: Simulate a person typing in a DOM node.](https://github.com/mehaase/js-typewriter)

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.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [September 14, 2017, 4:24am UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/9 "2017-09-14T04:24:23Z")

</div>

> [@edwardcoast](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [September 14, 2017, 4:28am UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/10 "2017-09-14T04:28:53Z")

</div>

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

[https://www.ibm.com/developerworks/library/wa-ioshtml5/](https://www.ibm.com/developerworks/library/wa-ioshtml5/)

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [September 14, 2017, 4:59am UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/11 "2017-09-14T04:59:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![septimus](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/septimus/32/410_2.png) [@septimus](https://boards.straightdope.com/u/septimus)\
**Post date:** [September 14, 2017, 10:07am UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/12 "2017-09-14T10:07:35Z")

</div>

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:

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [September 14, 2017, 1:42pm UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/13 "2017-09-14T13:42:44Z")

</div>

> [@septimus](#):
>
> 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:

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](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.

---

<div class="post-metadata">

**Author:** ![septimus](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/septimus/32/410_2.png) [@septimus](https://boards.straightdope.com/u/septimus)\
**Post date:** [September 14, 2017, 2:00pm UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/14 "2017-09-14T14:00:29Z")

</div>

> [@Reply](#):
>
> By “server version” … or did you download it and then reupload to a server under your own control?..  
> 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.

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](https://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 ).

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [September 14, 2017, 2:02pm UTC](https://boards.straightdope.com/t/javascript-can-this-be-done/796269/15 "2017-09-14T14:02:57Z")

</div>

> [@septimus](#):
>
> 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](https://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:’.
> 
> That was quick turnaround, **Reply**! _Thanks again._ I’ll have to ask similar questions more often (if I can overcame embarrassment about my own lack of skill :o ).

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.