Home>

Nice to meet you. This time, it's not too easy to see by self-study,
That's why I didn't meet the deadline to learn from 1 or do what I want to do this time.
I came here to see if you could help me somehow.
I am sorry if there is a shortage because it is the first post.

"I want to change the sound of" t.js "with typewriter-like animation"
Here is what I want to do.
■ Official Link
■ Github Link

The originally set sound is "beep".
Will it sound or not? That can be done with "true/false" easily, but
I want to change it to any sound.
The sound source is just a "typewriter sound" and short.
Both "mp3" and "wav" are available.
I've prepared, but I can't figure out where or how to change it.

I want to know

The "beep" sound is very painful and cannot be used.
Rather than modifying the original js file, the existing HTML source code is
Is it possible to play "mp3" or "wav" sound by adding the description?
I'm thinking if I can't refer to the following contents
It would be greatly appreciated if "Sound, Loop, Stop when processing is completed" can be done together with ".type".

$('# play'). bind ('touchstart', function () {
    var audio = new Audio ('sound.mp3');
    audio.load ();
    audio.addEventListener ('canplaythrough', function () {
        audio.play ();
        // Process the animation I want to move at the same time
        $('# keyvisual'). fadeIn (2000);
    },

 false);
    audio.addEventListener ("ended", function () {
        audio.play ();
    },

 false);
});


When looking for descriptions of such sounds, there are many things that "sound by pressing a button"
I'm also worried about how to start it automatically with t.js.

Applicable source code
<script type = "text/javascript">
$(function () {
  $('. type'). t ({
    delay: 0.5, // Delay animation
    speed: 160, // Animation speed
    speed_vary: false, // Realistic typing speed
    beep: true, // Presence of typing sound
    mistype: false, // presence of mistype
    locale: 'en', // Keyboard layout. 'en' (english) or 'de' (german)
    caret: true, // cursor
    blink: true, // whether the cursor blinks
    blink_perm: false, // Continue blinking cursor
    repeat: 0, // repeat
    tag: 'span', // Tag that contains the element
    pause_on_click: false, // pause on click
    init: function (elm) {},

 // Callback at the start of typing
    typing: function (elm, chr_or_elm, left, total) {},

 // callback for every typing
    fin: function (elm) {} // Callback at the end of typing
  });
});
</script>

■ t.js Link

I tried to read "mp3" by making "typewriter.js" as an alternative.
I was able to play the t.js class at the same time as the part that moved the class moved.
However, it continues to flow and I am worried about how to stop it after t.js is over.
This is an alternative, so it's best if you can change the original.

/*
 * typewriter.js
 * /
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext ();
// load audio buffer
var getAudioBuffer = function (url, fn) {
  var req = new XMLHttpRequest ();
  // specify array buffer
  req.responseType = 'arraybuffer';req.onreadystatechange = function () {
    if (req.readyState === 4) {
      if (req.status === 0 || req.status === 200) {
        // convert array buffer to audio buffer
        context.decodeAudioData (req.response, function (buffer) {
          // execute callback
          fn (buffer);
        });
      }
    }
  };
  req.open ('GET', url, true);
  req.send ('');
};
// play sound
var playSound = function (buffer) {
  // create source
  var source = context.createBufferSource ();
  // set buffer
  source.buffer = buffer;
  // connect to context
  source.connect (context.destination);
  // Regeneration
  source.start (0);
  // loop
  source.loop = true;
};
// main
window.onload = function () {
  // load sound
  getAudioBuffer ('typewriter.mp3', function (buffer) {
    //
     var id = "sound";
    // play sound
     playSound (buffer);
  });
};
■ HTML side
 I want the typewriter sound to stop when this DIV is over.
  • Answer # 1

    The corrections are
    https://github.com/mntn-dev/t.js/blob/master/t.js#L54
    That's right.

    http://phiary.me/webaudio-api-getting-started/#post-h2-id-0
    Etc. are likely to be helpful.

    Since there is a certain amount of modification, I think that it is a level to pass the source immediately after reading a little. (If you can, you may be able to source the answers here.)

Related articles