创建& lt; audio>元素，然后在单击表格单元格时播放

Create <audio> elements and then play when table cells is clicked

本文关键字：表格 单击 单元格 播放 audio lt 元素 创建 然后      更新时间：2023-09-26

我有一个有许多单元格的HTML表，我想给每个单元格一个类或ID，以便可以播放相应的声音。由于有许多单元格，我想用Javascript+jQuery自动完成这项任务，并有更少杂乱的HTML。

假设我有一个文本为a的单元格。我想将该单元格的类设置为click_sound_a，并生成一个ID为sound_a的<audio>标签，该标签将播放声音a.mp3。(我也可以为单元格使用id，但我想我会有一些重复。)

我有以下代码作为5个声音的例子:

<script type="text/Javascript">
 // trigger play event on an audio element
function playSound(sound) {
    $("#sound_"+sound).get(0).play();
}
$(document).ready(function() {
    var sounds = ["a", "i", "u", "e", "o"];
    // create HTML5 <audio> elements
    for (var i in sounds) {
        $("<audio id='sound_"+sounds[i]+"'>  <source src='/downloads/sounds/"+sounds[i]+".mp3' type='audio/mpeg'> </audio>").appendTo("#page");
        // make columns clickable to play sounds
        $(".click_sound_"+sounds[i]).click(function() {
            playSound(sounds[i]);
        });
    } // end for
});
</script>

问题是，当循环结束时，所有单元格都得到最后一个元素的声音，即使它们已经被分配了正确的类。所以在这种情况下，每个细胞都将播放o.mp3。虫子在哪里?

<script type="text/Javascript">
 // trigger play event on an audio element
function playSound(sound) {
  return function() {
    $("#sound_"+sound).get(0).play();
  }
}
$(document).ready(function() {
    var sounds = ["a", "i", "u", "e", "o"];
    // create HTML5 <audio> elements
    for (var i in sounds) {
        $("<audio id='sound_"+sounds[i]+"'>  <source src='/downloads/sounds/"+sounds[i]+".mp3' type='audio/mpeg'> </audio>").appendTo("#page");
        // make columns clickable to play sounds
        $(".click_sound_"+sounds[i]).click(playSound(sounds[i]));
    } // end for
});
</script>

解释:这是JavaScript的一个典型陷阱。无论何时调用您定义的事件处理程序，它都会查找i变量的值，该变量最近更新为4。您需要使用闭包将适当的值绑定到事件处理程序。

事实上，这与Crockford的书中的例子几乎相同:

相关文章：