Question

经过多个小时寻找自己的解决方案后，我一直在寻求你的帮助。

我想通过点击img来播放音频，这就是我用HTML组织代码的方式，每个类的音频都不同：a_ru.mp3，b_ru.mp3等。

    <span class="btn-audio-lexique">
        <audio src="http://localhost/linguami-offline/fr/mp3/a_ru.mp3"></audio>
        <img src="http://localhost/linguami-offline/img/circled-play.png">
    </span>

    <span class="btn-audio-lexique">
        <audio src="http://localhost/linguami-offline/fr/mp3/b_ru.mp3"></audio>
        <img src="http://localhost/linguami-offline/img/circled-play.png">
    </span>

遗憾的是，不适用的JS部分看起来像那样

    var classname = document.getElementsByClassName("btn-audio-lexique");

function playSound() {
    var audio = classname.firstElementChild;
    audio.play();
};

Array.from(classname).forEach(function(element) {
    element.addEventListener('click', playSound);
});

我也尝试过for循环

    for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', playSound);
}

控制台返回一个＆＃34;音频未定义错误＆＃34;。

我想避免为我页面中的所有音频创建不同的ID。

有没有人知道我应该如何组织我的代码呢？

提前致谢！

Answer 1

您的代码中几乎没有错误：

予。不要为每个操作元素添加事件侦听器。出于性能原因这很糟糕。您应该将事件侦听器添加到一些公共父元素，该元素包含所有子按钮。

document.querySelector('.myAwesomeContainer').addEventListener('click', function(e) {

  var target = e.target;

  if (target && target.classList.contains('btn-audio-lexique')) {
      var audio = target.firstElementChild;
      // var audio = target.querySelector('audio');

      if (audio) {
        audio.play();
      }
  }
});

II。你不一定需要搞砸音频元素。您可以使用AudioAPI并播放如下声音：

var audio = new Audio('audio_file.mp3');
audio.play();

III。不要使用<span>，<div>或任何HTML标记作为可点击的内容，除了<button>，<a>因为您正在破坏语义标记并降低您的应用程序的可访问性地面。

当前代码中出现错误的实际原因隐藏在该行中：

var audio = classname.firstElementChild;

您试图获取audio元素不是来自用户点击的实际SPAN，而是来自所有跨度的类似数组的对象。因为classname是所有跨度的列表。在那种情况下你能做什么？只需将event param添加到playSound函数即可。因为addEventListener会在触发事件时传递该参数：

var classname = document.getElementsByClassName("btn-audio-lexique");

function playSound(e) {
    // Get actual clicked element
    var target = e.target;
    var audio = target.firstElementChild;
    if (audio) {
        audio.play();
    }

};

Array.from(classname).forEach(function(element) {
    element.addEventListener('click', playSound);
});

单击类元素播放不同的音频

1 个答案:

单击类元素​​播放不同的音频

1 个答案:

单击类元素播放不同的音频