画像と音声を同期させたい

前提・実現したいこと

画像とテキストで入力した音声を同期させたい（”あ”の文字を打ったら画像が”あ”の文字になり、VOCALOIDのようなものを作りたい）

発生している問題・エラーメッセージ

画像と音声を出すことはできたが、その二つを同期させるやり方がどのようなコードを使うのかがわからない

###該当のソースコード
HTML5

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Talking Face "あ"の修正</title> <link rel="stylesheet" href="talking-face2.css"> <script src="./js/face-animation2.js"></script> <script src="./js/text-to-speech.js"></script> </head> <body>

<textarea id="text" rows="4" cols="40">
あいうえお
</textarea>

JavaScript
// 発音記号列
var PronNum = -1; //開始前は-1にしておく
var PronSeq = [ { name: "c", time: 2000 },
{ name: "a", time: 10000 },
{ name: "e", time: 4000 },
{ name: "i", time: 4000 },
{ name: "o", time: 4000 },
{ name: "u", time: 4000 },
{ name: "c", time: 4000 } ];

// canvas変数
var cvs;
var ctx;

// 顔データの保存領域
var img_f = new Image();
var img_eL1 = new Image();
var img_eL2 = new Image();
var img_eL3 = new Image();
var img_eR1 = new Image();
var img_eR2 = new Image();
var img_eR3 = new Image();
var img_mc = new Image();
var img_ma1 = new Image();
var img_ma2 = new Image();
var img_ma3 = new Image();
var img_ma4 = new Image();
var img_mi1 = new Image();
var img_mi2 = new Image();
var img_mu1 = new Image();
var img_mu2 = new Image();
var img_me1 = new Image();
var img_me2 = new Image();
var img_mo1 = new Image();
var img_mo2 = new Image();

// 顔データを取り出す連想配列
var imgdata;

// 表示する顔データ
var img_f = new Image(); //顔
var img_eL = new Image(); //左目
var img_eR = new Image(); //右目
var img_m = new Image(); //口

// タイマー変数
var tickTimeID;
var eyeTimeID, mouthTimeID, PronTimeID;
var eyeNum=mouthNum=1;

//ロード時に実行しておく関数
window.onload = function(){
cvs = document.getElementById("canvas");
ctx = cvs.getContext("2d");

img_f.src   = "./img/face_t.png";
img_eL1.src = "./img/eye_L1_t.png";
img_eL2.src = "./img/eye_L2_t.png";
img_eL3.src = "./img/eye_L3_t.png";
img_eR1.src = "./img/eye_R1_t.png";
img_eR2.src = "./img/eye_R2_t.png";
img_eR3.src = "./img/eye_R3_t.png";
img_mc.src  = "./img/mouth_c_t.png";
img_ma1.src = "./img/mouth_a1_t.png";
    img_ma2.src = "./img/mouth_a2_t.png";
    img_ma3.src = "./img/mouth_a3_t.png";
    img_ma4.src = "./img/mouth_a4_t.png";
img_mi1.src = "./img/mouth_i1_t.png";
img_mi2.src = "./img/mouth_i2_t.png";
img_mu1.src = "./img/mouth_u1_t.png";
img_mu2.src = "./img/mouth_u1_t.png";
img_me1.src = "./img/mouth_e1_t.png";
img_me2.src = "./img/mouth_e2_t.png";
img_mo1.src = "./img/mouth_o1_t.png";
img_mo2.src = "./img/mouth_o2_t.png";

imgdata = { "f":   img_f,
			"eL1": img_eL1,
			"eL2": img_eL2,
			"eL3": img_eL3,
			"eR1": img_eR1,
			"eR2": img_eR2,
			"eR3": img_eR3,
			"mc1": img_mc,
			"mc2": img_mc,
			"ma1": img_ma1,
                            "ma2": img_ma2,
                            "ma3": img_ma3,
                            "ma4": img_ma4,
			"mi1": img_mi1,
			"mi2": img_mi2,
			"mu1": img_mu1,
			"mu2": img_mu2,
			"me1": img_me1,
			"me2": img_me2,
			"mo1": img_mo1,
			"mo2": img_mo2};

//初期顔を表示
img_f.src = imgdata["f"].src;
img_eL.src = imgdata["eL"+1].src;
img_eR.src = imgdata["eR"+1].src;
img_m.src = imgdata["mc1"].src;
img_f.onload = function(){
	ctx.drawImage(img_f,0,0,800,750);
	ctx.drawImage(img_eL,0,0,800,750);
	ctx.drawImage(img_eR,0,0,800,750);
	ctx.drawImage(img_m,0,0,800,750);
};

// 顔を描き換えるタイマー関数tick()を起動しておく
tickTimeID = setInterval("tick()", 50);

} /* onload() */

// 一定時間ごとに顔を描き換える関数
function tick() {
ctx.drawImage(img_f,0,0,800,750);
ctx.drawImage(img_eL,0,0,800,750);
ctx.drawImage(img_eR,0,0,800,750);
ctx.drawImage(img_m,0,0,800,750);
} /* tick() */

// 目の画像を切り替える関数
function eyeMove(){
img_eL.src = imgdata["eL"+eyeNum].src;
img_eR.src = imgdata["eR"+eyeNum].src;
if((++eyeNum)==4) eyeNum=1;
} /* eyeMove() */

// 口の画像を切り替える関数
function mouthMove(){
img_m.src = imgdata["m"+PronSeq[PronNum].name+mouthNum].src;
if((++mouthNum)==5) mouthNum=1;
} /* mouthMove() */

// 発音を切り替える関数
function setPron(){

// 発音をセット
if (PronNum==-1) { // 初回のセット
	PronNum=0;
} else {
	if ((++PronNum)==PronSeq.length) PronNum=0;
}

// 現在音声出力中の母音を表示
switch(PronSeq[PronNum].name){
	case "c":
		document.getElementById("mouthstatus").value = "閉";
		break;
	case "a":
		document.getElementById("mouthstatus").value = "ア";
		break;
	case "i":
		document.getElementById("mouthstatus").value = "イ";
		break;
	case "u":
		document.getElementById("mouthstatus").value = "ウ";
		break;
	case "e":
		document.getElementById("mouthstatus").value = "エ";
		break;
	case "o":
		document.getElementById("mouthstatus").value = "オ";
		break;
}

// 次の母音に切り替える時間をセットする
PronTimeID = setTimeout("setPron()", PronSeq[PronNum].time);

} /* setPron() */

// 目の切り替え開始
function eyeStart() {

// 目の画像を切り替えるタイマー関数
eyeTimeID = setInterval("eyeMove()", 800);

} /* eyeStart() */

// 口の切り替えを開始
function mouthStart() {

// 発音をセットする
setPron();

// 口の画像を切り替えるタイマー関数
mouthTimeID = setInterval("mouthMove()", 500);

} /* mouthStart() */

JavaScript
window.addEventListener("load",function(){

const text      = document.querySelector('#text')
const speakBtn  = document.querySelector('#speak-btn')
const cancelBtn = document.querySelector('#cancel-btn')
const pauseBtn  = document.querySelector('#pause-btn')
const resumeBtn = document.querySelector('#resume-btn')

speakBtn.addEventListener('click', function() {
  const uttr = new SpeechSynthesisUtterance(text.value);
	uttr.rate = 1;
	uttr.pitch = 3;
	uttr.volume =1;
  speechSynthesis.speak(uttr);
  uttr.onend = function (event) {
    stop();
    console.log('喋った時間：' + event.elapsedTime + 'ms');
  }
  stat();

})

cancelBtn.addEventListener('click', function() {
  speechSynthesis.cancel();
  stop();

})

pauseBtn.addEventListener('click', function() {
  speechSynthesis.pause();
  pause();

})

resumeBtn.addEventListener('click', function() {
  speechSynthesis.resume()
  stat();

})

},true);