如何按各自的顺序从数组中选择每个元素？ （jQuery，JS）

Posted 2023-02-25

【中文标题】如何按各自的顺序从数组中选择每个元素？ （jQuery，JS）

【英文标题】：How to choose each element from an array in their respective order? (jquery, JS)

【发布时间】：2012-11-27 20:08:15

【问题描述】：

我的代码：

我知道我的 for 循环将所有数组元素分配给变量 pickSound，这就是为什么我只剩下它播放最后一个元素的原因。那么我怎样才能让它按顺序播放每个元素并在完成后重新开始。

 function show() 
        var sounds = new Array(
            "audio/basement.mp3",
            "audio/roll.mp3",
            "audio/gatorade.mp3",
            "audio/half.mp3",
            "audio/hotdogs.mp3",
            "audio/keys.mp3",
            "audio/heil.mp3",
            "audio/money.mp3",
            "audio/ours.mp3",
            "audio/pass.mp3"
        );

        for (var i = 0; i < sounds.length; i++)
    var pickSound = sounds[i];     
        

        $('#divOne').html("<embed src=\""+ pickSound +"\" hidden=\"true\" autostart=\"true\" />");
        return false;
    ;

【问题讨论】：

有一个解决方案，但意识到，在一个简单的 for 循环中执行此操作不会等待每个声音播放和完成。检查How to detect an audio has finished playing in a web page?

这不是你可以用 for 循环做的事情。您需要知道声音片段的持续时间并使用setTimeOut 播放它们，或者响应embed 元素引发的某种事件。

对不起，我应该补充一点，每次单击按钮都会播放一个新声音。因此可以随时播放新的声音。

【参考方案1】：

您可以尝试使用audio 元素和ended 事件。

HTML：

<audio id="audio" controls preload></audio>

JS：

(function() 
    var audioEl = document.getElementById('audio'),
        counter = -1,
        songs = [
            'http://forestmist.org/wp-content/uploads/2010/04/html5-audio-loop.mp3',
            'http://www.quackit.com/music/good_enough.mp3',
            'http://forestmist.org/wp-content/uploads/2010/04/html5-audio-loop.mp3',
            'http://www.quackit.com/music/good_enough.mp3'];

    function nextSong() 
        audioEl.removeEventListener('ended', nextSong);

        if (songs[++counter]) 
            audioEl.src = songs[counter];
            audioEl.addEventListener('ended', nextSong);
            audioEl.play();
         else 
            alert('All done!');
        
    

    nextSong();
());​

DEMO

【参考方案2】：

" 我应该补充一点，每次单击按钮都会播放一个新声音。因此可以随时播放新声音。"

我认为这意味着声音不会自动循环播放。您打算单击按钮播放下一个声音然后停止？

在下面的代码中，nextSound 变量保存了接下来应该播放的任何声音的索引。当单击按钮时（插入按钮的 ID 或其他适当的选择器），将使用与该索引关联的文件名，然后使用 modulus operator 递增 nextSound 以在到达末尾时循环回零数组。

$(document).ready(function() 
   var sounds = ["audio/basement.mp3",
                 "audio/roll.mp3",
                 "audio/gatorade.mp3",
                 "audio/half.mp3",
                 "audio/hotdogs.mp3",
                 "audio/keys.mp3",
                 "audio/heil.mp3",
                 "audio/money.mp3",
                 "audio/ours.mp3",
                 "audio/pass.mp3"],
       nextSound = 0;

    $("#yourButtonIDHere").click(function() 
       $('#divOne').html("<embed src=\""+ sounds[nextSound] +"\" hidden=\"true\" autostart=\"true\" />");
       nextSound = (nextSound + 1) % sounds.length;
    );
);

另请注意，通常建议使用方括号 [] 数组文字语法而不是 new Array() 来声明数组。

【讨论】：

嘿，这很好用。感谢您的帮助。 mod操作员总是让我感到困惑。

不客气。你当然可以说nextSound++; if (nextSound >= sounds.length) nextSound = 0;，但是mod操作符在使用时会做同样的事情。