javascript - 播放/暂停/停止打字机中的音频

Question

我很快就会开始直播。我正在使用 Streamelements。所以我找到了一个覆盖层并对其进行了一些更改。 Typewrite 在制作警报框时使用，我喜欢它。我只是想给它添加键盘声音。但我做不到。我添加的声音会继续播放，直到警报结束。我希望声音在一些单词和文本结束后暂停/停止。

我试图在 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};
    }

HTML

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

Answer 1

play 方法返回一个 Promise:https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play 。您使用的库提供了一个 callFunction 方法，您可以在 start 之前运行该方法，以便它将在所有先前的方法完成后运行。

将两者结合起来:

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

startTyping()