Question

所以我发现了一个脚本并对其进行了修改以便能够满足我的需求。但我需要再做一件事，不知道从哪里开始。

以下是用于获取两个不同音频文件以使用两个不同按钮

的代码

        $(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次？

我见过很多＆＃34;功能组合＆＃34;发布但没有看起来他们会帮我工作，除非我忽略了什么。

感谢您的帮助

Answer 1

this（event.target）如评论所示，您可以拥有一个针对所有音频按钮的事件处理程序，并根据音频链接的href推断要播放的音频文件（因此您不需要进行硬编码你的JS中的值

$(document).on("click", ".sound", function(event) {
    // Stop browser following link
    event.preventDefault();

    // Get clicked link
    var link = this;

    // Create audio element with url from link
    var audioElement = document.createElement('audio');
    audioElement.addEventListener("load", function(event) {
        audioElement.play();
    }, true);
    audioElement.setAttribute('src', link.href);
    audioElement.load()
});

这需要将{1}}标记中的国旗图片包裹在<a>：

class="sound"

Answer 2

我会这样做，

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

将多个音频单击JS功能组合成一个？

2 个答案:

Fiddle Demo