I want to make a realistic typing effect with sound. I'm using Typed.js, I have already create a simple example.
Here is my code :
var keystrokeSound = new Audio('http://www.freesfx.co.uk/rx2/mp3s/6/18660_1464810669.mp3');
function playSound () {
keystrokeSound.pause();
keystrokeSound.currentTime = 0;
keystrokeSound.play();
}
var typed = new Typed('.element', {
strings: ["Play sound each I type character", "It's only play on start of string"],
typeSpeed: 50,
preStringTyped : function(array, self){
playSound();
}
});
.typed-cursor{
opacity: 1;
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
0% { opacity: 1; }
50% { opacity: 0.0; }
100% { opacity: 1; }
}
.typed-fade-out{
opacity: 0;
transition: opacity .25s;
-webkit-animation: 0;
animation: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.min.js"></script>
<span class="element" style="white-space:pre"></span>
The typing effect works as excepted. But no with the sound, the sound only play when the first char of sentence only. I have read the docs, but I can't found callback for each char typed. How to play sound on each typed char?
Here's the fiddle
Answer my own question, the best way to do that is, edit the source code directly, and create a callback for each typed char. I'm just edit a little bit the source code (uncompressed version)
Found the typewrite
function, and add this script before end of function
// fires callback function
this.options.onCharAppended(substr.charAt(0), this);
Also, found the defaults
object, there is collection of default function for callback, I just add
onCharAppended: function onCharAppended(char, self){},
And then I can play sound with sync and precision time with the additional callback
var typed = new Typed('.element', {
strings: ["Test ^1000 with delay"],
typeSpeed: 100,
onCharAppended : function(char, self){
playSound();
}
});