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

属

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

我希望每个字母都伴随弹出的声音弹出到屏幕上。现在，弹出的声音是随机的，并且没有定时播放每个字母。

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

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

这是完整的代码：

（我尝试过JSFiddle，但是无法使其正常工作（我将保存该问题以备后用））

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

凯文·麦克高恩

我建议您使声音循环更长一点，例如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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。