1

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)
    }
}
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Brian Thompson
  • 7
  • 4
  • The 1st parameter to `setTimeout` could be a function object like `setTimeout(rotate, 3 * 1000)` – Kiril Oct 21 '14 at 19:44
  • 1
    I haven't investigated your actual problem at all, but I'm guessing you meant to do `addImages[0] = ...` instead of repeatedly clobbering `addImages` with `addImages = ...` (Note that `addImages.push(...)` will save you the trouble of incrementing a counter.) – apsillers Oct 21 '14 at 19:46
  • Yes, I copied the wrong one. I had it addImages[0], addImages[1] and so forth just like the addSound. I was hoping they could sync. I change to what was on here using the push, but now i get the blank box. – Brian Thompson Oct 21 '14 at 20:09

2 Answers2

0

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.

Parker
  • 8,539
  • 10
  • 69
  • 98
  • Thank you. I tried to do the above but it never actually plays the wave. It shows the picture then goes to the next screen as the wave file. – Brian Thompson Oct 21 '14 at 22:02
  • That's because you're not trying to play the wav file in your code – Parker Oct 21 '14 at 22:02
  • Right. That's what I'm trying to find out. Everything I find online and in books relates to a mouseover or onclick event. Do I put it in my IF statement or create a new function? Or does it go under my document.myPicture.src=addImages[thisAdd]? I tried document.myPicture.src=addSound[thisAdd] but it did nothing but I presume it's because it's related to just the images. I really don't know what to do. – Brian Thompson Oct 22 '14 at 01:31
  • Yeah, I saw that one too. It too is for one audio file. I may not be clear on what I'm 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. – Brian Thompson Oct 22 '14 at 02:48
  • Please update your question with that info, putting it in a comment means others are less likely to see it. Also, recording, storing, and retrieving audio is different than what your title implies, so please update accordingly so we understand what you're having trouble with – Parker Oct 22 '14 at 02:49
  • But I do appreciate everyone's responses. I may try an XML file. I literally started learning JavaScript and Java last week trying to put this together for him. At least for now he will have the pictures and stuff he wrote about them. Thanks again. – Brian Thompson Oct 22 '14 at 02:51
  • Glad it's helping a little. Check out http://stackoverflow.com/questions/4227313/audio-capturing-with-html5 . Also, you may want to break your questions down into different questions, that focus on one specific aspect of this project – Parker Oct 22 '14 at 02:53
0

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>
Brian Thompson
  • 7
  • 4