将多个音频点击 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(); }); });

【解决方案1】：

我会这样做，

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

【讨论】：

所以这看起来不错，但是我如何将它链接到我的 HTML 图片，您可以在下面的示例中看到，我有一个 li 里面有图片？

【解决方案2】：

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()
});

这需要用class="sound" 将您的标志图像包装在<a> 标签中：

<ul>
    <li>
        <a class="sound" href="http://example.com/sound1.mp4">
            <img src="images/duck-belgium.png" class="img-responsive">
        </a>
    </li>
    <li>
        <a class="sound" href="http://example.com/sound2.mp4">
            <img src="images/duck-china.png" class="img-responsive">
        </a>
    </li>
    <li>
        <a class="sound" href="http://example.com/sound3.mp4">
            <img src="images/duck-spain.png" class="img-responsive">
        </a>
    </li>
</ul>

【讨论】：

感谢您将它们放在一起，但这似乎只是链接到音频文件，回头看看我的网站并单击鸭子，然后单击第一个标志，只需打开其中的音频文件网址
啊，您需要在处理程序中执行event.preventDefault() 以停止浏览器跟随链接。更新了答案。
现在打不开但也打不开，在同一个示例链接上更新我的代码
您的站点似乎已关闭（“不可用站点暂时不可用。连接超时 - 请重试。”）
是的，对不起，我的服务器刚刚打了一个小嗝，但现在它又回来了，我觉得这是正确的轨道。我是新的 JS，所以感谢到目前为止的所有帮助