个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 02:10:20 25 4
gpt4 key购买 nike

我试图使声音文件播放更快，以便跟上下面代码中显示的文本。声音有效(无论如何在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>

最佳答案

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

关于javascript - 如何在多个重叠的实例中播放声音文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24715986/

25 4 0
文章推荐： audio - 简单音频单元使AU Lab崩溃，寻找HasCustomView吗？
文章推荐： search - 控制如何对Elasticsearch字段进行标记以进行构面
文章推荐： python - Kivy:如何让每个按钮播放不同的声音
文章推荐： ruby-on-rails - 使用gem Tire和ElasticSearch建立正确的搜索请求
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com