1

我正在寻找一个图像，单击该图像时播放声音剪辑（来自声音剪辑列表）而不重复相同的剪辑（直到用户浏览整个声音列表。）

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

如果有人知道如何调整它以使其在重复之前至少播放列表中的每个剪辑一次，那就太棒了！

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

<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()代码的一部分有关？

4

3 回答 3

3

您可以将数组用作播放列表并将播放的声音保存在第二个数组中。检查我的JSfiddle

<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>
于 2013-11-26T22:57:49.847 回答
1

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

  1. 循环生成随机索引，直到找到尚未播放的索引
  2. 当我们找到一个没有播放的时候，将它添加到一个数组中以供将来参考并播放它

  3. 当数组的长度等于声音数组的长度时，我们知道我们已经播放了所有的声音。此时我们清空数组并继续。

    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\" />");

}
于 2013-11-26T22:10:37.777 回答
0

我很想做这样的事情（JSFiddle 示例）：

var sounds = [];

// Return the full list of URLs in random order
function getSounds() {
    return [
        'url1',
        'url2',
        'url3'
    ].sort(function () {
        // http://stackoverflow.com/a/18650169/283078
        return (.5 - Math.random());
    });
}

// Play the next sound
function playSound() {
    if (!sounds.length) {
        // Get the list of sounds (random order)
        sounds = getSounds();
    }

    // Pops a URL every time, ensuring all are played exactly once
    $("#element").html(
        '<embed src="' + sounds.pop() +
        '" hidden="true" autostart="true" />'
    );

    // Once all the URLs have been popped, the process starts again
}
于 2013-11-26T22:06:38.683 回答