因此,我找到了一个脚本,并对其进行了修改,使其可以满足我的需要。但是我需要再做一件事,不确定从哪里开始。

这是代码im用于获取两个不同的音频文件以使用两个不同的按钮播放

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

我看到过很多“功能组合”的帖子,但是除非我忽略了某些内容,否则没有一个看起来可以为我工作。

谢谢您的帮助

最佳答案

我会这样

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对象,所以不会同时播放两首歌曲
Fiddle Demo

10-05 20:34
查看更多