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

How do you make a sound file play in multiple overlapping instances?

本文关键字：重叠 实例 播放 何使 声音 文件      更新时间：2023-09-26

我正试图获得一个声音文件播放速度更快，以跟上下面代码中的文本显示。声音工作(无论如何在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>
相关文章：