Ich möchte ein Bild haben, das beim Klicken einen Soundclip (aus einer Liste von Soundclips) wiedergibt, ohne denselben Clip zu wiederholen (bis der Benutzer die gesamte Liste der Sounds durchläuft).

Im Moment funktioniert mein Code, spielt aber zufällig einen meiner Soundclips ab und wiederholt sich häufig.

Wenn jemand weiß, wie man dies optimiert, damit jeder Clip in der Liste mindestens einmal abgespielt wird, bevor er wiederholt wird, wäre das brillant!

Dies ist der Code, den ich gerade verwende:

<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>

Ich vermute, es hat etwas mit dem Math.random() Teil des Codes zu tun?

1
Adam 27 Nov. 2013 im 00:26

2 Antworten

Beste Antwort

Sie können das Array als Wiedergabeliste verwenden und die abgespielten Sounds in einem zweiten Array verwalten. Überprüfen Sie meine 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>
3
jkutianski 29 Nov. 2013 im 06:55

Ich wäre versucht, so etwas zu tun (JSFiddle-Beispiel):

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
}
0
cmbuckley 26 Nov. 2013 im 22:20