对于一系列图片,我希望每张图片都有不同的音频

时间:2014-10-21 19:39:29

标签: javascript arrays html5 image html5-audio

我已经设置了一张可以浏览很多图片的随机幻灯片。我想为每一个添加一个简短的音频剪辑,并让它们与我用于随机图片的数组同步。以下是我所拥有的类似示例。我是JavaScript的新手,我已经在数百个地方搜索了答案,但似乎没有任何效果。请帮忙。谢谢。

更新。我可能不太清楚。这就是我想要做的:我的儿子喜欢动物。他是自闭症,所以他不断列出他的动物和他们的事情。我为他的计算机创建了一个幻灯片,其中包含所有500张图片及其中的内容。它会在一个屏幕上自动播放随机图像,并且可以手动浏览另一个屏幕。他希望用他们的名字和他们的东西录制5-10秒的短音频。我希望能够将他的录音与照片相关联,并在每次图像改变时播放录音

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

2 个答案:

答案 0 :(得分:0)

您没有正确添加数组。你创建一个数组然后继续覆盖它;而不是一遍又一遍地设置变量,使用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"])

要获取您addImages[i][0]的图片,要获取您执行的图像addImages[i][1]。没有必要像你那样为声音制作一个单独的数组。

答案 1 :(得分:0)

谢谢大家的帮助。我能够得到答案。

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