用Typedjs在每个字符上播放声音

Question

我想用声音做一个真实的打字效果。我正在使用Typed.js，我已经创建了一个简单的示例。

这是我的代码：

​

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>

​

键入效果与例外一样有效。但是没有随着声音，声音只播放时，只有第一个字符的句子。我已经阅读了文档，但是我无法为输入的每个字符找到回调。如何在每个类型的字符上播放声音？

这是小提琴

Answer 1

回答我自己的问题，最好的方法就是直接编辑源代码，并为每个类型的字符创建一个回调。我只是编辑一些源代码(未压缩版本)

找到typewrite函数，并在函数结束前添加此脚本

// fires callback function
this.options.onCharAppended(substr.charAt(0), this);

另外，找到defaults对象时，会有回调的默认函数集合，我只需添加

onCharAppended: function onCharAppended(char, self){},

然后，我可以播放声音的同步和精确时间与额外的回调。

var typed = new Typed('.element', {
    strings: ["Test ^1000 with delay"],
    typeSpeed: 100,
    onCharAppended : function(char, self){
        playSound();
    }
});

Answer 2

试试下面的代码：

​

var keystrokeSound = new Audio('http://www.freesfx.co.uk/rx2/mp3s/6/18660_1464810669.mp3');
var interval ;
    function playSound () {
         clearInterval(interval);
         interval = setInterval(function(){
                 keystrokeSound.pause();
                 keystrokeSound.currentTime = 0;
                 keystrokeSound.play();
         },220);
    }

    var typed = new Typed('.element', {
        strings: ["Play sound each I type character", "It's only play on start of string"],
        typeSpeed: 100,
        preStringTyped : function(array, self){
            playSound();
        },
        onStringTyped : function(array, self){
            clearInterval(interval);
        },
        onComplete: function(array, self){
            clearInterval(interval);
        }
    });

.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: 50;
      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>

​

Answer 3

您还可以尝试循环声音，并从onStringTyped调用typed.js方法：

​

var keystrokeSound = new Audio('http://www.freesfx.co.uk/rx2/mp3s/6/18660_1464810669.mp3');

function playSound () {
    if (typeof keystrokeSound.loop == 'boolean')
    {
        keystrokeSound.loop = true;
    }
    else
    {
        keystrokeSound.addEventListener('ended', function() {
            this.currentTime = 0;
            this.play();
        }, false);
    }
    keystrokeSound.play();
}

function stopSound () {
    keystrokeSound.pause();
}

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();
    },
    onStringTyped : function(array, self){
        stopSound();
    }    
});

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

​