Question

我正在尝试让声音文件更快地播放，以便跟上以下代码中的文本显示。声音有效（在Firefox中，无论如何），但它似乎只能一次播放一个文件实例。

我想让每个字母都弹出屏幕并伴有砰砰声。现在，弹出的声音有点随机，而且没有时间播放每个字母。

我想知道我是否需要声音对象的多个实例，以及如何做到这一点。

我已经尽可能地缩短了声音文件，并且文件的长度比我使用的setTimeout间隔短。它只是不会重叠相同声音文件的多个副本，这是一个很好的理由，我不知道，我确定。

以下是整个代码：

（我尝试JSFiddle it，但无法解决问题（我将此问题保存到以后））

<html>
<head>
<style>
#display        {
                color: white;
                font-size: 150%;
                padding: 2em 5em;
                min-height: 600px;
                max-width: 600px;
                margin-left: auto;
                margin-right: auto; 
                }

body            {
                background-color: black;
                padding: 0;
                margin:0;
                }
</style>

<script>
    var text = "Test String...   1, 2, 3; Everything seems to be working, but the sound is lagging.";
    var charDelay = 40;     // Sets the delay time for the character loop

    function loadText() {
        var i = 0; // Character counter
        var myPud = new Audio("http://southernsolutions.us/audio/pud03.ogg");
        var displayBox = document.getElementById("display");
        displayBox.innerHTML = "<p>";
        textLoop();

        function textLoop() {
            if (i == text.length){                  // This condition terminates the loop
                displayBox.innerHTML += "</p>";
                return;

            } else if (i < text.length) {       // This condition appends the next character
                displayBox.innerHTML += text[i];
                i++;
                myPud.play();
                setTimeout(function(){return textLoop()}, charDelay);
            }
        }
    }   

    window.onload = function(){loadText()}; 
</script>

</head>
<body>
<div id="display"></div>
</body>
</html>

Answer 1

我建议你让声音循环更长一点，比如1秒钟。然后，控制通过事件监听器播放的声音，以便在文本完成后停止播放声音。

当你现在正在尝试这样做时，你可以加快声音在音频文件中播放的速度。这应该会产生更好的结果。那，或者减慢时间。

下面是我测试过的一些代码，可以通过事件监听器来完成。结果与您的结果类似，但是如果您将音频文件增加到1秒并将其更改为有24次点击，那么您将获得所需的确切效果。

修改：我还更新了以下内容以考虑评论。

   <script>
    var text = "Test String...   1, 2, 3; Everything seems to be working, but the sound is lagging.";
    var charDelay = 40;     // Sets the delay time for the character loop

    function loadText() {
        var i = 0; // Character counter
        var myPud = new Audio("http://southernsolutions.us/audio/pud03.ogg");
        var displayBox = document.getElementById("display");

        // Toggle for whether to loop
        var stillPlay = true;
        displayBox.innerHTML = "<p>";

        // Listen for when it ends
        myPud.addEventListener("ended", onAudioComplete);
        // Begin playing
        myPud.play();
        // Start the loop
        textLoop();

        function textLoop() {
            if (i == text.length){                  // This condition terminates the loop
                displayBox.innerHTML += "</p>";
                // If we're at the end, we want to stop playing
                stillPlay = false;
                // Rather than duplicate code, jump straight into the complete function
                onAudioComplete(null);
                return;
            } else if (i < text.length) {       // This condition appends the next character
                displayBox.innerHTML += text[i];
                i++;
                // Direct reference to the function to avoid more anony. functions
                setTimeout(textLoop, charDelay);
            }
        }

        // On audio complete
        function onAudioComplete(e){
            // Can we still play? If so, play
            if(stillPlay){
                myPud.play();
            } else {
                // Otherwise, remove the event listener, stop and null out.
                myPud.removeEventListener("ended", onAudioComplete);
                myPud.stop();
                myPud = null;
            }
        }
    }   

    window.onload = loadText; 
</script>

如何在多个重叠的实例中播放声音文件？

1 个答案: