With an array of pictures I would like to have a different audio for each image

Question

I have set up a random slideshow that goes through many picture. I am wanting to add a short audio clip to each one and have them sync with the array I use for the random pictures. Below is a similar example of what I have. I'm new to JavaScript, and I've searched hundreds of places for an answer but nothing seems to work. Please help. Thank you.

UPDATE. I may not have been clear. This is what I am trying to do: My son loves animals. He's autistic, so he is constantly listing out his animals and things about them. I created a slideshow for his computer with all 500 pictures and stuff about them. It auto plays random images on one screen and he can manually browse on another. He wants to record short, 5-10 second audio with their name and something about them. I want to be able to associate his recordings with the pictures and have the recordings play each time an image changes

addImages = new Array

addImages[0] = "one.bmp"
addImages[1] = "two.bmp" 
addImages[2] = "three.bmp"
addImages[3] = "four.bmp" 
addImages[4] = "five.bmp" 
addImages[5] = "six.bmp"
addImages[6] = "seven.bmp"

imgCt = addImages.length
firstTime = true

addSound = new Array
addSound[0] = "tada.wav"
addSound[1] = "recycle.wav"
addSound[2] = "ringout.wav"
addSound[3] = "notify.wav"
addSound[4] = "tada.wav"
addSound[5] = "tada.wav"
addSound[6] = "tada.wav"

imgCt2 = addSound.length

function rotate() 
{
    if (document.images) 
    {
        if (firstTime) 
        {
            thisAdd = Math.floor((Math.random() * imgCt))
            firstTime = false
        }
        else 
        {
            thisAdd++
            if (thisAdd == imgCt) 
            {
                thisAdd = 0
            }
        }
        document.myPicture.src=addImages[thisAdd]
        setTimeout("rotate()", 3 * 1000)
    }
}

Answer 1

You're not adding to an array properly. You create an array then keep overwriting it; instead of setting the variable over and over, use push()

addImages = new Array

addImages.push(["one.bmp", "tada.wav"])
addImages.push(["two.bmp", "tada.wav"])
addImages.push(["three.bmp", "tada.wav"]) 
addImages.push(["four.bmp", "tada.wav"])
addImages.push(["five.bmp", "tada.wav"])
addImages.push(["six.bmp", "tada.wav"])
addImages.push(["seven.bmp", "tada.wav"])

To get an image you'd do addImages[i][0] , to get an image you do addImages[i][1] . There's no need to make a separate array for sounds like you do after.

Answer 2

Thank you everyone for your assistance. I was able to come up with an answer.

<script>
    function pickimg() {
        var imagenumber = 4;
        var randomnumber = Math.random();
        var rand1 = Math.round((imagenumber - 1) * randomnumber) + 1;
        images = new Array
        images[1] = "image1.bmp"
        images[2] = "image2.bmp"
        images[3] = "image3.bmp"
        images[4] = "image4.bmp"
        var image = images[rand1];
        document.randimg.src = image

        var sounds = new Array
        sounds[1] = "sound1.wav"
        sounds[2] = "sound2.wav"
        sounds[3] = "sound3.wav"
        sounds[4] = "sound4.wav"
        var sound = sounds[rand1];
        audioTag.src = sound;
        audioTag.play();
    }
</script>