javascript - 创建一个函数 javascript/jquery 来检测画布上的点击

Question

我需要创建一个功能，如果我单击网站上的特定图像，它将播放仅与该图片关联的特定音频文件。我有一些代码，但我似乎无法让功能部分正确。我希望每次您单击图像时，它都会播放特定的音频，当您再次单击它时，它会暂停。我的网站上有很多图片。太感谢了！

编辑：由于我是新成员，该网站不允许我发布代码的屏幕截图，

[小提琴。网络链接][2]

[2]：http://jsfiddle.net/c8KTg/

Answer 1

你应该修改你的音频标记：

<audio controls="controls" id="clips">
   <source src="1.mp3" />
   <source src="2.mp3" />    
</audio>

那么这样的事情可能会做到这一点：

$('.images').each(function(index, element) {
    $(this).click(function(e) {
        var id = this.attr('id');
        var sound_id = id.split('image')[1];
        var music = $('#clips').get(sound_id);
        music.play();
    });
});