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

Question

我的代码：

我明白我的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;
    };

Answer 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

Answer 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()声明数组。