javascripthtmlcssaudiotypedjs

Play sound at each char with Typedjs


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


Solution

  • 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();
        }
    });