在打字机中播放/暂停/停止音频

我很快就要开始流媒体了。我正在使用流元素。所以我发现了一个覆盖,并做出一些改变。在制作警告框时使用打字机，我喜欢它。我只是想给它添加键盘声音。但我做不到。我添加的声音会继续播放，直到警报结束。我想让声音在一些单词和文本结束后暂停/停止。

我试图展示我在JS部分要做的事情。(因为我的英语不太好。)我希望我已经解释了我想要的。

JS:

const name='{name}';
const amount='{amount}';
const wrapData=(message)=>{
return message.replace(/b{name}b/g, '<span class="username">{name}</span>').replace(/{currency}{amount}b/g, '<span class="amount">{currency}{amount}</span>').replace(/b{amount}{currency}/g, '<span class="amount">{amount}{currency}</span>').replace(/b{amount}b/g, '<span class="amount">{amount}</span>').replace(/{currency}/g, '<span class="amount">{currency}</span>');
}
const typewriter = new Typewriter('.text-container', {
skipAddStyles:true,
delay:50
});

const row1a=wrapData(`{row1}`);
const row2a=wrapData(`{row2}`);
const row3a=wrapData(`{row3}`);
const row4a=wrapData(`{row4}`);
var audio = new Audio('keyboard.wav');
audio.play();
typewriter.typeString(`<div class="row1 message" style="display: inline-block;">${row1a}</div>`)
.pauseFor(200)
.stop();
audio.pause();
typewriter.typeString(`<div class="added-divs">.</div>`)
.pauseFor(200)
.typeString(`<div class="added-divs">.</div>`)
.pauseFor(200)
.typeString(`<div class="added-divs">.</div>`)
.pauseFor(200)
.typeString(`<div class="added-divs">DONE!</div>`)
.pauseFor(50)
.stop();
audio.play();
typewriter.typeString(`<div class="row2 message">${row2a}</div>`)
.pauseFor(50)
.typeString(`<div class="row3 message">${row3a}</div>`)
.pauseFor(50)
.typeString(`<div class="row4 message">System Message: <span class="username">Thank you!</span></div>`)
.pauseFor(50)
.typeString(`<div class="row4 message" style="display: inline-block;">${row4a}</div>`)
.pauseFor(200)
.stop();
audio.pause();
typewriter.typeString(`<div class="added-divs">.</div>`)
.pauseFor(200)
.typeString(`<div class="added-divs">.</div>`)
.pauseFor(200)
.typeString(`<div class="added-divs">.</div>`)
.pauseFor(200)
.typeString(`<div class="added-divs">DONE!</div>`)
.pauseFor(50)
.start();

CSS

@import url('https://fonts.googleapis.com/css?family={fontName}');
* {
font-family: '{{fontName}}', sans-serif;
color:{{fontColor}};
font-weight:{{fontWeight}};
}

body{
background-image:url('{image}');
background-size:contain;
background-repeat:no-repeat;
position:relative;
margin:0px;

}

.text-container{
width:100%;
height:100%;
position: absolute;
top: 10px;
padding-left:15px;
}
.alertbox-message-emote{
height:1em; 
}


.added-divs {
display: inline-block;
color:{{row1FontColor}};
font-weight:{{row1FontWeight}};
font-size:{{row1FontSize}}px;
}

.row1{
color:{{row1FontColor}};
font-weight:{{row1FontWeight}};
font-size:{{row1FontSize}}px;
animation-delay:1s;
}
.row2{
color:{{row2FontColor}};
font-weight:{{row2FontWeight}};
font-size:{{row2FontSize}}px; 
animation-delay:3.5s;
}
.row3{
color:{{row3FontColor}};
font-weight:{{row3FontWeight}};
font-size:{{row3FontSize}}px; 
animation-delay:5.5s;
}
.row4{
color:{{row4FontColor}};
font-weight:{{row4FontWeight}};
font-size:{{row4FontSize}}px; 
animation-delay:7.5s;
}
.username{
color:{usernameFontColor};
}
.amount{
color:{amountFontColor};
}

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<div class="text-container">
<div class="row1 message"></div>
<div class="row2 message"></div>
<div class="row3 message"></div>
<div class="row4 message"></div>
</div>

const startTyping = async () => {
await audio.play()
typewriter
.typeString(...)
.callFunction(() => audio.pause())
.start()
}
startTyping()