タイプライター風「t.js」のbeep音を変更したい【もしくは追加】

Question

初めまして。この度は独学で見ているばかりでは余りにわからなく、
だからといって１から学ぶにか今回やりたい事への期限に間に合わず、
どうにかお力添えを頂けないかとこちらにやって参りました。
初めての投稿なのもあり、不足がありましたら申し訳ありません。

前提・実現したいこと

「タイプライター風アニメーションの出来る「t.js」の音を変えたい」
やりたい事はこちらになります。
■公式　リンク
■Github　リンク

元々設定されている音が「beep」です。
鳴らすか、鳴らさないか。という事は簡単に「true/false」で出来るのですが、
【任意の音に変更したい】と思っています。
音源はまさしく「タイプライター音」で短いもの。
「mp3」でも「wav」でも用意してあります。
用意はしたものの、どこをどう変えたらいいか検討がつかずにいます。

知りたい事

「beep」音というものがとても苦痛で、使用できないのが現状です。
大元のjsファイルの修正ではなく、今あるHTMLのソースコードに
記載を追加する方法での「mp3」あるいは「wav」の音を鳴らすというのは可能なのでしょうか？
下記のような内容を参考に出来ないかどうか考えているのですが
「.type」と一緒に「鳴らす、ループ、処理が終われば止まる」が出来れば幸いです。

$('#play').bind('touchstart', function() {
	var audio = new Audio('sound.mp3');
	audio.load();

	audio.addEventListener('canplaythrough', function() {
		audio.play();
		//同時に動かしたいアニメーションの処理
		$('#keyvisual').fadeIn(2000);
	}, false);

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

こういった音の記載を探すと「ボタンを押して鳴らす」ものが多く、
t.jsと一緒に自動起動させるにはどうしたらいいか…という部分でも悩んでいます。

該当のソースコード

<script type="text/javascript">
$(function(){
  $('.type').t({
    delay:0.5, //アニメーションの遅延
    speed:160, //アニメーションの速度
    speed_vary:false, //リアルなタイピングのスピード
    beep:true, //タイピング音の有無
    mistype:false, //ミスタイプの有無
    locale:'en', //キーボードレイアウト。'en' (english) もしくは 'de' (german)
    caret:true, //カーソル
    blink:true, //カーソルの点滅の有無
    blink_perm:false, //カーソルの点滅の継続
    repeat:0, //繰り返し
    tag:'span', //要素を内包するタグ
    pause_on_click:false, //クリックで一時停止
    init:function(elm){}, //タイピング開始時のコールバック
    typing:function(elm,chr_or_elm,left,total){}, //タイピング毎のコールバック
    fin:function(elm){} //タイピング終了時のコールバック
  });
});
</script>

■ t.js リンク

試したこと

代案として「typewriter.js」というものを作ってmp3を読み込んでみました。
t.jsのクラスをいれている部分が動くと同時に流す事も出来ました。
しかし流れ続けてしまい、t.jsが終わった後どうやって止めたらいいかに悩んでいます。
こちらは代案なので、元々の変更が出来れば一番ではあります。

/*
 * typewriter.js
 */

window.AudioContext = window.AudioContext || window.webkitAudioContext;  
var context = new AudioContext();

// Audio 用の buffer を読み込む
var getAudioBuffer = function(url, fn) {  
  var req = new XMLHttpRequest();
  // array buffer を指定
  req.responseType = 'arraybuffer';

  req.onreadystatechange = function() {
    if (req.readyState === 4) {
      if (req.status === 0 || req.status === 200) {
        // array buffer を audio buffer に変換
        context.decodeAudioData(req.response, function(buffer) {
          // コールバックを実行
          fn(buffer);
        });
      }
    }
  };

  req.open('GET', url, true);
  req.send('');
};

// サウンドを再生
var playSound = function(buffer) {  
  // source を作成
  var source = context.createBufferSource();
  // buffer をセット
  source.buffer = buffer;
  // context に connect
  source.connect(context.destination);
  // 再生
  source.start(0);
  // ループ
  source.loop = true;
};

// main
window.onload = function() {  
  // サウンドを読み込む
  getAudioBuffer('typewriter.mp3', function(buffer) {
    // 
     var id = "sound";
    // サウンドを再生
     playSound(buffer);
  });
};

■HTML側
<div id="sound" class="type">タイプライター音がこのDIVが終わったら止まって欲しい。</div>

Answer 1

修正箇所は
https://github.com/mntn-dev/t.js/blob/master/t.js#L54
あたりですね。

http://phiary.me/webaudio-api-getting-started/#post-h2-id-0
等が参考になりそうです。

修正量はそれなりにあるので、ちょっと読んですぐこの場でソースを渡すレベルではないかと思います。（できる方ならここの回答にソースを張る事も出来そうではあります。）

Comments

[krswakt]

回答ありがとうございます。
修正箇所と参考URL先は既に確認しており、その上で理解に到っておりませんでした…。
54～56にある箇所の何がどれに該当するのか、参考URL先と比べても同じようには思えず途方にくれていたところでした。そこが理解出来なければ難しいのかもしれないとは思っても、このままわからないままにしたくなく挙げさせて頂いた内容でした。
わかりにくい質問の中、検討してくださってありがとうございます…！

[yut148]

大体は想定ついていらしたのですね。t.jsではWeb Audio APIのbeep音を使っています。Web Audio APIによる音源を出力しています。この際beep音等であればmp3などは不要で出力できる訳です。そこをmp3にするのでそれなりに修正量が増える訳です。このあたり音の専門でもないので誤った表現が含まれているかも知れないですが御了承ください。https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API

[krswakt]

Web Audio APIから呼び出している音を変更というのは中々に難しいのですね…。
もう一度読み直そうと思います。

参考URL先の内容で音を流すという部分はなんとか代案が作れました。有難うございます。