数组中音频的未定义错误

Posted 2023-02-25

【中文标题】数组中音频的未定义错误

【英文标题】：Undefined error for audio in array

【发布时间】：2013-08-02 23:11:04

【问题描述】：

我有一个图像 .png 文件数组和一个匹配的 .mp3 数组。单击图像应该通过将索引从一个数组传递到另一个数组来播放音频，但是最后一行出现“未定义”错误。

$(document).ready(function () 
    var starting_pics = ["CN.gif", "EN.gif", "GN.gif"];
    var starting_sounds = ["CN.mp3", "EN.mp3", "GN.mp3"];

    var i = 0;

    for (i = 0; i < starting_pics.length; i++) 
        $("<img/>").attr("src", "images/" + starting_pics[i]).load(function () 
            $(this).appendTo("#main");
            $(this).addClass("pics");
        );
    

    for (i = 0; i < starting_sounds.length; i++) 
        $("<audio/>").attr("src", "audio/" + starting_sounds[i]).load(function () 
            $(this).appendTo("#main");
            $(this).addClass("sound");
        );
    

    $("#main").on("click", ".pics", function () 
        var i = $(this).index();
        alert(i);
        $(".sound").get(i).play();
    );
);

【问题讨论】：

最后一行？你得更清楚

哈哈，我很快就阅读了您的评论和您的用户名，我想“哇，这太苛刻了”:)

$(".sound").get(i).play();

对该小提琴 here 的一些修改 - 它似乎工作得很好。

项目未正确附加，您不需要.load() 回调。

【参考方案1】：

使用.load()未正确附加元素，请进行以下修改。

for (i = 0; i < starting_pics.length; i++) 
  $("<img/>").attr("src", "" + starting_pics[i])
             .appendTo("#main")
             .addClass("pics");


for (i = 0; i < starting_sounds.length; i++) 
  $("<audio/>").attr("src", "" + starting_sounds[i])
               .appendTo("#main")
               .addClass("sound");

更新：

该版本的.load() 自 jQuery 1.8 起已弃用 - 使用 $("selector").on("load, func...。并确保在设置src 属性之前绑定load 事件 - 如果设置了`src，某些浏览器会立即触发load 事件，如果它已被缓存。

此外，<audio> 元素似乎没有load 事件。这就是为什么没有找到元素的原因 - load 事件从未执行过，因此没有附加它们。您要查看的事件是 canplay 或 canplaythrough，或者来自以下列表：https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Media_events

【讨论】：

load 的要点是确保在将图像附加到 DOM 之前加载。我看不出这是如何解决任何问题的

@lan 如果您发现此答案不正确，请添加另一个全面的答案，我将非常乐意将其删除。

我不认为它不正确，只是它没有修复问题...它通过忽略它来规避它。这实际上取决于 OP 想要/想要什么......并且加载速度足够快，您可能不应该遇到代码问题。尽管如此，如果 OP 希望仅在加载元素后添加元素，则需要为图像侦听 load 事件，并为音频元素侦听 canplaythrough 事件（after 都设置了 src )。

使用.trigger("play") 而不是.get(i).play() 也可能有意义，因此它可以安全地尝试触发事件。如果音频元素未添加到 DOM，.get(i).play() 将抛出 OP 看到的错误

@lan 请继续添加您所说的作为答案。它看起来比我的好得多，我想这就是 OP 想要的。更不用说这可以防止任何可能发生的问题。