播放随机声音而不重复

Question

我正在寻找一张图片，当点击该图片时，它会播放一个声音片段（来自声音片段列表）而不重复相同的片段（直到用户浏览整个声音列表。）

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

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

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

<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() 部分有关？

Answer 1

您可以将数组用作播放列表并将播放的声音保存在第二个数组中。检查我的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>

Answer 2

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

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

Answer 3

我很想做这样的事情 (JSFiddle example)：

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
}