Слушать случайные звуки без повторения

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

Я был бы соблазн сделать что-то вроде этого (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 
} 

Answer 3

Я не побежал следующий код, но план должен быть достаточно. Это всегда будет воспроизводить звуки в случайном порядке. Шаги:

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