2

我的代码：

我知道我的 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;
    };
4

2 回答 2

2

您可以尝试使用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();
}());​

演示

于 2012-11-27T20:33:53.727 回答
1

“我应该补充一点，每次点击按钮都会播放一个新的声音。所以可以随时播放一个新的声音。”

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

在下面的代码中，nextSound变量保存了接下来应该播放的任何声音的索引。单击按钮时（根据需要插入按钮的 ID 或其他选择器），将使用与该索引关联的文件名，然后使用模运算符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().

于 2012-11-27T20:26:34.037 回答