如何在动画结束时停止声音

Question

总的来说，我在编码方面的经验很少。但不知何故，我设法做到了这一点，而我被困在最后一件事上。

这是一个 Twitch 警报，我正在通过“流元素”进行此操作

我遇到的问题是在输入字母完全出现后停止声音，我不知道该怎么做。有可能吗？

我忘了提，Typekit 链接被故意破坏，因为我不想分享链接（因为我假设它们都是唯一的，并且基于您的 adobe 帐户）

$(document).ready(function() {
    var timer, fullText, currentOffset, onComplete,  hearbeat = document.getElementById('heartbeat');

    heartbeat.play();
    function Speak(person, text, callback) {
        $("#usernamean-container").html(person);
        fullText = text;
        currentOffset = 0;
        onComplete = callback;
        timer = setInterval(onTick, 120
       );
    }

    function onTick() {
        currentOffset++;
        if (currentOffset == fullText.length) {
            complete();
            return;
        }
        var text = fullText.substring(0, currentOffset);
        $("#message").html(text);
    }
    function complete() {
        clearInterval(timer);
        timer = null;
        $("#message").html(fullText);
        onComplete()
        ;
    }

    $(".box").click(function () {
        complete();
    });

    Speak("{{name}}",
        "{{name}} Is now a Witness",
    )
    //get data from the ???? StreamElements ???? data injection
    const name = '{{name}}';

    // vanilla es6 query selection (can use libraries and frameworks too)
    const userNameContainer = document.querySelector('#username-container');

    // change the inner html to animate it ????
    userNameContainer.innerHTML = stringToAnimatedHTML(name, animation);

    /**
     * return an html, with animation
     * @param s: the text
     * @param anim: the animation to use on the text
     * @returns {string}
     */
    function stringToAnimatedHTML(s, anim) {
        let stringAsArray = s.split('');
        stringAsArray = stringAsArray.map((letter) => {
            return `<span class="animated-letter ${anim}">${letter}</span>`
        });
        return stringAsArray.join('');

    }
    heartbeat.pause();
    heartbeat.currentTime = 0;
});

@import url(@import url("https://use.typekit.net/.css");

.awsome-text-container {
    font-family: typeka, sans-serif;
    font-size: 42px;
    font-weight: 400;
}

.image-container {
    margin: auto;
    display: table;
}

.text-container {
    font-family: typeka, sans-serif;
    font-size: 26px;
    color: rgb(204, 10, 33);
    text-align: center;
    margin: auto;
    text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="heart" class="heart">
    <audio id="heartbeat" src="https://cdn.discordapp.com/attachments/135995830279733248/733547597305741332/typewriters.mp3" preload="auto"></audio>
  <link rel="stylesheet" href="https://use.typekit.net/.css">
  <div class="text-container">
      <div class="image-container">
          <img src="https://media.tenor.com/images/83d6a5ed40a24164dfe1e4e19fad23d9/tenor.gif">
      </div>
      <div>
          <div class="awsome-text-container">
              <span id="message"></span>
              <br>
          </div>
      </div>
</div>

Answer 1

您好，欢迎来到 Stack Overflow！

我看到过更混乱的代码，因此很失望 ;-)。关于你的问题：

主要问题是您的代码中有错字，并且您在 complete 方法中调用 heartbeat.pause(); 而不是在脚本末尾（因为这将独立于动画的完成而调用）。

错别字：

hearbeat = document.getElementById('heartbeat');

改变方法：

function complete() {
    clearInterval(timer);
    timer = null;
    $("#message").html(fullText);
    heartbeat.pause();
    heartbeat.currentTime = 0;
}

并从脚本底部删除这些行。