Javascript 将多个音频点击JS功能合并为一个？

所以我找到了一个脚本，并对其进行了修改，以满足我的需要。但我还需要做一件事，不知道从哪里开始

下面是我用来获取两个不同音频文件的代码，用两个不同的按钮播放

        $(document).on("click", "li", function(event) {
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'http://www.uscis.gov/files/nativedocuments/Track%2093.mp3');

            //audioElement.load()
            $.get();
            audioElement.addEventListener("load", function(event) {
            audioElement.play();
            }, true);

            $('.play-duck-1').click(function(event) {
            audioElement.play();
            });
        });

            $(document).on("click", "li", function(event) {
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'http://sandbox.acscreative.com/cort-aminals/sounds/new-recording.m4a');

            //audioElement.load()
            $.get();
            audioElement.addEventListener("load", function(event) {
            audioElement.play();
            }, true);

            $('.play-duck-2').click(function(event) {
            audioElement.play();
            });
        });

有没有一种方法可以组合这些脚本，这样我就不必为36个不同的音频文件和按钮复制和粘贴36次

我看过很多关于“功能组合”的帖子，但是没有一篇看起来像是适合我的，除非我忽略了一些东西

感谢您的帮助

这（event.target）如注释所示，您可以有一个单一的事件处理程序，以所有音频按钮为目标，并从音频链接的href推断要播放的音频文件（因此您不需要硬编码JS中的值）

这需要在

此（event.target）如评论所述，您可以有一个单一的事件处理程序，以所有音频按钮为目标，并从音频链接的href推断要播放的音频文件（因此您不需要硬编码JS中的值）

这需要在

我会这样做

var audList = [
    ...
];  // can be dynamic, fetched from somewhere
var parentElement = document.getElementById('btnParent');
var audio = new Audio();
audList.forEach(function(src){
    parentElement.appendChild(createBtnElement(src.img, src.audio));
});

function createBtnElement(imgSrc, audioSrc){
    var li = document.createElement('li');
    var btn = document.createElement('img');
    btn.setAttribute('src', imgSrc);
    btn.setAttribute('height', 80); // change as per requirement
    btn.setAttribute('width', 80); // change as per requirement
    btn.className = 'playAudio someCSSClass img-responsive';
    btn.onclick = function(){
        audio.src = audioSrc;
        audio.play();
    };
    li.appendChild(btn);
    return li;
}

这样，一旦更改了音频文件的数量，就不需要触摸HTML，只需修改

audList

，这样做的另一个优点是，不会同时播放两首歌曲，因为只有一个

audio

对象

---

我会这样做

var audList = [
    ...
];  // can be dynamic, fetched from somewhere
var parentElement = document.getElementById('btnParent');
var audio = new Audio();
audList.forEach(function(src){
    parentElement.appendChild(createBtnElement(src.img, src.audio));
});

function createBtnElement(imgSrc, audioSrc){
    var li = document.createElement('li');
    var btn = document.createElement('img');
    btn.setAttribute('src', imgSrc);
    btn.setAttribute('height', 80); // change as per requirement
    btn.setAttribute('width', 80); // change as per requirement
    btn.className = 'playAudio someCSSClass img-responsive';
    btn.onclick = function(){
        audio.src = audioSrc;
        audio.play();
    };
    li.appendChild(btn);
    return li;
}

这样，一旦更改了音频文件的数量，就不需要触摸HTML，只需修改

audList

，这样做的另一个优点是，不会同时播放两首歌曲，因为只有一个

audio

对象

---

当前，当单击

时，两个处理程序都将运行。您需要检测单击了哪个按钮（使用event.target）并从中确定url。这听起来像你想要的吗？我不这么认为，这是我的网站。如果你点击duck+并点击前两个标志（比利时和中国），你可以看到它们都在播放不同的文件。但是我需要为36个不同的标志加载36个不同的文件，我只是在寻找一种更有效的方法，不需要复制和粘贴36次。好的，共享页面有助于我更好地理解结构。我建议对每个标志按钮使用

标记，并将

href

设置为音频文件。然后，您可以有一个事件侦听器，该侦听器针对声音按钮的一般情况，因此您有一个处理程序用于所有动物和声音。当前，当单击

时，您的两个处理程序都将运行。您需要检测单击了哪个按钮（使用event.target）并从中确定url。这听起来像你想要的吗？我不这么认为，这是我的网站。如果你点击duck+并点击前两个标志（比利时和中国），你可以看到它们都在播放不同的文件。但是我需要为36个不同的标志加载36个不同的文件，我只是在寻找一种更有效的方法，不需要复制和粘贴36次。好的，共享页面有助于我更好地理解结构。我建议对每个标志按钮使用

标记，并将

href

设置为音频文件。然后你可以有一个事件监听器，它以声音按钮的一般情况为目标，这样你就有了一个处理所有动物和声音的处理程序。感谢你把它们放在一起，但这似乎只是链接到音频文件，看看我的网站，点击鸭子，然后点击第一个标志，打开URLAh中的音频文件，您需要在处理程序中执行

event.preventDefault（）

，以停止链接后的浏览器。更新的答案。现在它没有打开，但也没有播放，请在相同的示例链接上更新我的代码您的网站似乎已关闭（“不可用的网站暂时不可用。连接超时-请重试”）。是的，很抱歉，我的服务器刚刚有一个小嗝，但它现在回来了，我觉得这是正确的路径。我是一个新的JS，非常感谢所有的帮助，非常感谢你把它放在一起，但这似乎只是链接到音频文件，看看我的网站，然后点击duck，然后点击第一个标志，打开URLAh中的音频文件，你需要做

event.preventDefault（）

在处理程序中停止链接后的浏览器。更新的答案。现在它没有打开，但也没有播放，请在相同的示例链接上更新我的代码您的网站似乎已关闭（“不可用的网站暂时不可用。连接超时-请重试”）。是的，很抱歉，我的服务器刚刚有一个小嗝，但它现在回来了，我觉得这是正确的路径。我是一个新的JS，非常感谢所有的帮助，这看起来不错，但是我如何将它链接到我的HTML图像，你可以在下面的示例中看到，我有一个带有图像的li？所以这看起来不错，但是我如何将它链接到我的HTML图像，你可以在下面的示例中看到，我有一个带有图像的li？

var audList = [
    ...
];  // can be dynamic, fetched from somewhere
var parentElement = document.getElementById('btnParent');
var audio = new Audio();
audList.forEach(function(src){
    parentElement.appendChild(createBtnElement(src.img, src.audio));
});

function createBtnElement(imgSrc, audioSrc){
    var li = document.createElement('li');
    var btn = document.createElement('img');
    btn.setAttribute('src', imgSrc);
    btn.setAttribute('height', 80); // change as per requirement
    btn.setAttribute('width', 80); // change as per requirement
    btn.className = 'playAudio someCSSClass img-responsive';
    btn.onclick = function(){
        audio.src = audioSrc;
        audio.play();
    };
    li.appendChild(btn);
    return li;
}