将HTML5音频标记与JavaScript结合使用

我想使用HTML、CSS和JavaScript为16个音频文件的网格设置音频链接。其想法是在网格中的每个框中链接到一个单独的音频文件

我认为使用一个表可以解决这个问题，并用HTML/CSS创建了一个表。我使用的TD单元如下所示：

 <td id="A" class="squareA" type="button";><audio src="music/work_it.wav">Work It</td> 

---

您可能需要针对每个

td

中的

audio

标记，但目前还没有唯一的标识符来帮助完成该任务。只需在代码中添加一小部分即可解决此问题

<td id="A" class="squareA" type="button";>
   <audio id="audio-A">
     <source src="music/work_it.wav" type="audio/wav">
   </audio>
   Work It
</td>

但是，如果

控件

不存在（或设置为

controls=“false”

），则默认浏览器播放器将不会出现。我想这就是你想要的，因为你想通过点击事件播放音频文件

此时音频标签

id

s不一定有用，因为如果没有

控件

浏览器中没有显示任何可单击的内容，在这种情况下，您需要将其包含在表中的所有

td

标签作为目标

如果尚未向音频表（例如：“音频表”）添加

id

属性，则可以

.addEventListener（）

向每个td框添加页面加载时调用的函数；类似于

function addEvents2Table() {
  /* presuming the table has an
     id of 'audio-table' here */
  var audioTable = document.getElementById('audio-table');

  /* td tag collection */
  var tdTags = audioTable.getElementsByTagName('td');
  var len = tdTags.length;

  /* add a 'playAudio' function call
     to each td when clicked */
  while(len--) {
    tdTags[len].addEventListener(
      'click', playAudio, false
    );
  }
}

/* call 'addEvents2Table()' on page load */
window.onload = function() {
  addEvents2Table();
};

现在，当单击表中的

td

时，将启动

playAudio（）

功能。现在所需要的就是这个功能。这就是关注html标记真正有帮助的地方

在上面的第一个代码示例中，我使用

id=“A”

将

id=“audio-A”

添加到td标签内的音频标签中。“A”（或“B”或“C”等）现在可以派上用场了

function playAudio(event) {
  /* get the 'id' of the clicked element */
  var tagID = event.target.id;

  /* add it to 'audio-' */
  var audioID = 'audio-' + tagID;

  /* target the corresponding audio tag */
  var audioTAG = document.getElementById(audioID);

  /* play the file */
  audioTAG.play();
}

这里还有其他的事情要考虑。是否希望浏览器同时播放音频文件？您希望用户能够停止音频剪辑吗？正如我们现在看到的，您可以快速连续单击所有框，浏览器将尝试彼此播放所有音频文件。此外，如果您在播放音频文件时单击一个框，您将抛出一些问题

不过，这应该足以让你开始。如果需要进一步澄清，请发表评论

---

同时，这里是供参考的。

对不起，作为一个例子（16个表格中的1个），我正在使用的表格HTML代码正在使用中。非常感谢Brian-我将按照您的建议尝试添加这些位，这是一个巨大的帮助：-）@并且83没有问题。如果需要，只需返回并发表评论；-）

function addEvents2Table() {
  /* presuming the table has an
     id of 'audio-table' here */
  var audioTable = document.getElementById('audio-table');

  /* td tag collection */
  var tdTags = audioTable.getElementsByTagName('td');
  var len = tdTags.length;

  /* add a 'playAudio' function call
     to each td when clicked */
  while(len--) {
    tdTags[len].addEventListener(
      'click', playAudio, false
    );
  }
}

/* call 'addEvents2Table()' on page load */
window.onload = function() {
  addEvents2Table();
};

function playAudio(event) {
  /* get the 'id' of the clicked element */
  var tagID = event.target.id;

  /* add it to 'audio-' */
  var audioID = 'audio-' + tagID;

  /* target the corresponding audio tag */
  var audioTAG = document.getElementById(audioID);

  /* play the file */
  audioTAG.play();
}