Javascript 播放不重复的随机声音

我希望有一个图像，当点击播放声音片段列表中的声音片段时，不会重复相同的片段，直到用户浏览整个声音列表

目前，我的代码正常工作，但随机播放我的任何一个声音片段，并重复了很多次

如果有人知道如何调整它，让它在重复之前至少播放列表中的每个片段一次，那将是非常棒的

这是我目前正在使用的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function playSounds() {
    var sounds = [
        "AUDIO URL",
        "AUDIO URL",
        "AUDIO URL",
        "AUDIO URL",
        "AUDIO URL"
    ];

    var index = Math.floor(Math.random() * (sounds.length));
    $("#element").html("<embed src=\"" + sounds[index] + "\" hidden=\"true\" autostart=\"true\" />");
}
</script>

<a onclick="playSounds()"><img src="IMAGE URL" width="300px" id="ImageButton1"></a>

---

我猜这与代码中的Math.random部分有关？

我很想这样做：

---

我很想做这样的事情：

---

我还没有运行下面的代码，但是大纲应该足够了。这将始终以随机顺序播放声音。这些步骤是：

在循环中生成随机索引，直到找到尚未播放的索引 当我们找到一个未播放的时，将其添加到阵列中以供将来参考并播放 我们知道当数组的长度等于声音数组的长度时，我们已经播放了所有的声音。此时，我们清空阵列并继续

var playedSounds = [];

var sounds = [
    "AUDIO URL",
    "AUDIO URL",
    "AUDIO URL",
    "AUDIO URL",
    "AUDIO URL"
];

function hasPlayed(sound) {

    if (playedSounds.length == sounds.length) {

        // We've played all of the sounds. Reset and start again.
        playedSounds = [];
        playedSounds.push(sound);
        return false;

    }

    // We haven't played all the sounds yet but check to see whether we've played the current one.
    for (var i = 0; i < playedSounds.length; i++)
        if (playedSounds[i] == sound)
            return true;

    // Note that we've now played this sound.
    playedSounds.push(sound);
    return false;

}

function playSounds() {

    var index = Math.floor(Math.random() * (sounds.length));

    // Loop until we've found a sound that we've not yet played.
    while (hasPlayed(index)) {

        index = Math.floor(Math.random() * (sounds.length));

    }

    $("#element").html("<embed src=\"" + sounds[index] + "\" hidden=\"true\" autostart=\"true\" />");

}

---

我还没有运行下面的代码，但是大纲应该足够了。这将始终以随机顺序播放声音。这些步骤是：

在循环中生成随机索引，直到找到尚未播放的索引 当我们找到一个未播放的时，将其添加到阵列中以供将来参考并播放 我们知道当数组的长度等于声音数组的长度时，我们已经播放了所有的声音。此时，我们清空阵列并继续

var playedSounds = [];

var sounds = [
    "AUDIO URL",
    "AUDIO URL",
    "AUDIO URL",
    "AUDIO URL",
    "AUDIO URL"
];

function hasPlayed(sound) {

    if (playedSounds.length == sounds.length) {

        // We've played all of the sounds. Reset and start again.
        playedSounds = [];
        playedSounds.push(sound);
        return false;

    }

    // We haven't played all the sounds yet but check to see whether we've played the current one.
    for (var i = 0; i < playedSounds.length; i++)
        if (playedSounds[i] == sound)
            return true;

    // Note that we've now played this sound.
    playedSounds.push(sound);
    return false;

}

function playSounds() {

    var index = Math.floor(Math.random() * (sounds.length));

    // Loop until we've found a sound that we've not yet played.
    while (hasPlayed(index)) {

        index = Math.floor(Math.random() * (sounds.length));

    }

    $("#element").html("<embed src=\"" + sounds[index] + "\" hidden=\"true\" autostart=\"true\" />");

}

---

您可以将该阵列用作播放列表，并将播放的声音保留在第二个阵列中。检查我的

---

您可以将该阵列用作播放列表，并将播放的声音保留在第二个阵列中。检查我的

---

---

太棒了，非常感谢，成功了！现在唯一的问题是音频剪辑不再在页面加载时自动启动。我怎么解决这个问题？你试过了吗？我已经复制了你的嵌入代码，因此autostart应该没有任何区别。你知道如何让这种代码在移动和平板电脑浏览器上工作吗？你需要用户交互来启动音频，否则它不会自动播放：我有一个图像，用户可以单击它来播放音频剪辑，当他们像在桌面上那样单击图像时，我可以在手机上播放音频吗我不介意失去MobileBilliant的自动播放功能，非常感谢，它成功了！现在唯一的问题是音频剪辑不再在页面加载时自动启动。我怎么解决这个问题？你试过了吗？我已经复制了你的嵌入代码，因此autostart应该没有任何区别。你知道如何让这种代码在移动和平板电脑浏览器上工作吗？你需要用户交互来启动音频，否则它不会自动播放：我有一个图像，用户可以单击它来播放音频剪辑，当他们像在桌面上那样单击图像时，我可以在手机上播放音频吗我不介意失去MobileBilliant上的自动播放功能，这正是我要找的地方！嗨，你知道我怎样才能让这些代码也在平板电脑和移动浏览器上运行吗？它必须在HTML5中吗？我更改代码以使用HTML5音频元素。记住并不是所有的浏览器都支持MP3。我该怎么做呢？对不起，我对此一无所知！检查浏览器的音频格式，这是我要找的地方！嗨，你知道我怎样才能让这些代码也在平板电脑和移动浏览器上运行吗？它必须在HTML5中吗？我更改代码以使用HTML5音频元素。记住并不是所有的浏览器都支持MP3。我该怎么做呢？对不起，我对此一无所知！检查浏览器的音频格式您知道如何使此代码在移动和平板电脑浏览器上工作吗？这是我正在使用的代码-在移动/平板电脑上不工作您知道如何使此代码在移动和平板电脑浏览器上工作吗？这是我正在使用的代码-在移动/平板电脑上不工作

<a onclick="playSounds()">
   <img src="http://www.stephaniequinn.com/Ani-Piano.gif" width="300px" id="ImageButton1">
</a>
<div id="element"></div>
<script>
var sounds = ["http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3",
              "http://www.stephaniequinn.com/Music/Canon.mp3",
              "http://www.stephaniequinn.com/Music/Handel%20Royal%20Fireworks%20-%2007.mp3",
              "http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2009.mp3"],
    oldSounds = [];

var playSounds = function () {
    var index = Math.floor(Math.random() * (sounds.length)),
        thisSound = sounds[index];

        oldSounds.push(thisSound);
        sounds.splice(index, 1);

        if (sounds.length < 1) {
            sounds = oldSounds.splice(0, oldSounds.length);
        }

        $("#element").html("<audio autoplay><source src=\"" + thisSound + "\" type=\"audio/mpeg\"><embed src=\"" + thisSound + "\" hidden=\"true\" autostart=\"true\" /></audio>");
}
</script>