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

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

在循环中生成随机索引，直到我们找到一个尚未播放的
当我们找到一个未播放的节目时，将其添加到数组以供将来参考并播放

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

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
}

播放随机声音而不重复

3 个答案: