How to choose each element from an array in their respective order? (jquery, JS)

Question

My code:

I understand that my for loop assigns all array elements to the variable pickSound and that is why I am left with it only playing the last element. So how can I get it to play each element in order and start over once done.

 function show() {
        var sounds = new Array(
            "audio/basement.mp3",
            "audio/roll.mp3",
            "audio/gatorade.mp3",
            "audio/half.mp3",
            "audio/hotdogs.mp3",
            "audio/keys.mp3",
            "audio/heil.mp3",
            "audio/money.mp3",
            "audio/ours.mp3",
            "audio/pass.mp3"
        );

        for (var i = 0; i < sounds.length; i++){
    var pickSound = sounds[i];     
        }

        $('#divOne').html("<embed src=\""+ pickSound +"\" hidden=\"true\" autostart=\"true\" />");
        return false;
    };

Had a solution, but realized, doing that in a simple for loop won't wait for each sound to be played and finished. Check [How to detect an audio has finished playing in a web page?](http://stackoverflow.com/questions/4619917/how-to-detect-an-audio-has-finished-playing-in-a-web-page) — kmfk, Nov 27 '12 at 20:16
this is not something you can do with a for loop. you'd need to either know the durations of the sound clips and use `setTimeOut` to play them, or respond to some sort of event raised by the `embed` element. — jbabey, Nov 27 '12 at 20:16
Sorry I should have added that each click of the button plays a new sound. So a new sound can be played at any time. — thomasp423, Nov 27 '12 at 20:18

score 2 · Answer 1 · answered Nov 27 '12 at 20:33

You could try using the audio element and the ended event.

HTML:

<audio id="audio" controls preload></audio>

JS:

(function() {
    var audioEl = document.getElementById('audio'),
        counter = -1,
        songs = [
            'http://forestmist.org/wp-content/uploads/2010/04/html5-audio-loop.mp3',
            'http://www.quackit.com/music/good_enough.mp3',
            'http://forestmist.org/wp-content/uploads/2010/04/html5-audio-loop.mp3',
            'http://www.quackit.com/music/good_enough.mp3'];

    function nextSong() {
        audioEl.removeEventListener('ended', nextSong);

        if (songs[++counter]) {
            audioEl.src = songs[counter];
            audioEl.addEventListener('ended', nextSong);
            audioEl.play();
        } else {
            alert('All done!');
        }
    }

    nextSong();
}());

DEMO

nnnnnn · Accepted Answer · 2012-11-27T20:33:49.983

" I should have added that each click of the button plays a new sound. So a new sound can be played at any time."

I take it that means the sounds aren't to be played continuously on an automatic loop. You intend for a click of a button to play whichever sound is next and then stop?

In the following code the nextSound variable holds the index of whatever sound should be played next. When a button is clicked (insert your button's ID or other selector as appropriate) the file name associated with that index is used and then nextSound is incremented using the modulus operator to loop back to zero when it gets to the end of the array.

$(document).ready(function() {
   var sounds = ["audio/basement.mp3",
                 "audio/roll.mp3",
                 "audio/gatorade.mp3",
                 "audio/half.mp3",
                 "audio/hotdogs.mp3",
                 "audio/keys.mp3",
                 "audio/heil.mp3",
                 "audio/money.mp3",
                 "audio/ours.mp3",
                 "audio/pass.mp3"],
       nextSound = 0;

    $("#yourButtonIDHere").click(function() {
       $('#divOne').html("<embed src=\""+ sounds[nextSound] +"\" hidden=\"true\" autostart=\"true\" />");
       nextSound = (nextSound + 1) % sounds.length;
    });
});

Note also that it is generally recommend to declare arrays with the square bracket [] array literal syntax rather than new Array().

Hey this works beautifully. Thank you for the help. The mod operator always confused me. — thomasp423, Nov 27 '12 at 20:35
You're welcome. You can of course say `nextSound++; if (nextSound >= sounds.length) nextSound = 0;`, but the mod operator does the same thing when used as shown. — nnnnnn, Nov 27 '12 at 20:38

How to choose each element from an array in their respective order? (jquery, JS)

2 Answers2