对于一组图片，我想为每张图片设置不同的音频答案

【问题标题】：With an array of pictures I would like to have a different audio for each image对于一组图片，我想为每张图片设置不同的音频
【发布时间】：2014-12-17 03:54:34
【问题描述】：

我已经设置了一个随机幻灯片，它可以浏览许多图片。我想为每个片段添加一个简短的音频片段，并让它们与我用于随机图片的数组同步。下面是我所拥有的类似示例。我是 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)
    }
}

【问题讨论】：

setTimeout 的第一个参数可以是像setTimeout(rotate, 3 * 1000) 这样的函数对象
我根本没有调查过你的实际问题，但我猜你打算做addImages[0] = ...，而不是用addImages = ...反复破坏addImages（注意addImages.push(...)会节省你增加一个计数器的麻烦。）
是的，我复制错了。我有它 addImages[0]、addImages[1] 等等，就像 addSound 一样。我希望他们可以同步。我使用推送更改为这里的内容，但现在我得到了空白框。

标签： javascript arrays html image html5-audio

【解决方案1】：

您没有正确添加到数组中。您创建一个数组，然后继续覆盖它；而不是一遍又一遍地设置变量，使用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]。无需像您之后那样为声音制作单独的数组。

【讨论】：

谢谢。我尝试执行上述操作，但它从未真正发挥作用。它显示图片，然后作为波形文件进入下一个屏幕。
那是因为您没有尝试在代码中播放 wav 文件
对。这就是我想要找出的。我在网上和书中找到的所有内容都与鼠标悬停或点击事件有关。我是把它放在我的 IF 语句中还是创建一个新函数？还是它在我的 document.myPicture.src=addImages[thisAdd] 下？我尝试了 document.myPicture.src=addSound[thisAdd] 但它什么也没做，但我认为这是因为它仅与图像有关。我真的不知道该怎么办。
是的，我也看到了。它也适用于一个音频文件。我可能不清楚我要做什么……我儿子喜欢动物。他患有自闭症，所以他不断地列出他的动物和关于它们的事情。我为他的电脑制作了一个幻灯片，里面有所有 500 张图片和关于它们的东西。它在一个屏幕上自动播放随机图像，他可以在另一个屏幕上手动浏览。他想用他们的名字和一些关于他们的东西录制简短的 5-10 秒音频。我希望能够将他的录音与图片相关联，并在每次图像更改时播放录音。
请使用该信息更新您的问题，将其放在评论中意味着其他人不太可能看到它。此外，录制、存储和检索音频与您的标题所暗示的不同，因此请进行相应更新，以便我们了解您遇到的问题

【解决方案2】：

感谢大家的帮助。我能够想出一个答案。

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

【讨论】：