Typed.js - How to use :typedcomplete event?

Question

I'm using the typed.js integration module for Sugarcube, and I'd like a typewriter effect to play whenever something is typed. I tried doing this:

<<audio "type" play>>
<div class="typed-speed15">
Another person missing in a series of disappearances
</div>
<<audio "type" stop>>

But the audio doesn't play. I'm guessing "play" and "stop" are happening at the same time, because when I do this:

<<audio "type" play>>
<div class="typed-speed15">
Another person missing in a series of disappearances
</div>
<<timed 1s>>
<<audio "type" stop>>
<</timed>>

The audio plays. But it would be nice if I didn't have to measure the time it takes for each portion of text to be written out to "play" and "stop" the audio at the right time. The typed.js module documentation states that a ":typedcomplete" event exists, but it doesn't seem to be in the same language as Twine so I'm not sure how to use this. Any help would be appreciated.

Answer 1

Assuming you're using the module that came with that documentation, and not a previous version which did not include the event, the following should work:

<<audio "type" play>>\
<div class="typed-speed15">
Another person missing in a series of disappearances
</div>\
<<script>>
$(document).one(':typedcomplete', function () {
	$.wiki('<<audio "type" stop>>');
});
<</script>>

NOTE: The :typedcomplete event is fired only after all typed sections within the passage are complete.

Comments

That explains it. I'm using multiple typed sections in one passage. Any way I can get it to fire multiple times in one passage? If not, I can work around that.

---

Not with the current implementation, no.  Could I add something to that effect, yes.

---

Updated the module to add two new events :typedstart and :typedstop.

If you're attempting to do what I think you are, have your sound played only when typing is happening, then after updating to the new module add something like the following to your Story JavaScript: (do not use the <<script>> macro or code from the previous example)

$(document)
	.on(':typedstart', function () {
		$.wiki('<<audio "type" play>>');
	})
	.on(':typedstop', function () {
		$.wiki('<<audio "type" stop>>');
	});

 

Answer 2

It's JavaScript. Try something like this (goes in story JavaScript):

$(document).on(':typedcomplete', function () {
    $.wiki('<<audio "type" stop>>');
});

Warning: untested, as I don't have that add-on installed. 

Comments

It didn't seem to work. Should something go in (document)? I don't have much javascript experience.

---

Hmm. I'll have to look into it more. In the meantime, does this do anything? 

$(document).on(':typedcomplete', function () {
    alert("typing stopped");
});

 

---

It seems to be working fine for me.