在JavaScript中使用HTML5音频标签

Question

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

我认为使用表格可能对此有效，并使用HTML / CSS创建了表格。 我按如下方式使用TD单元：

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

然后，我尝试使用JS如下设置事件侦听器/ getElementsByTagName，但陷入了一个老问题。 如果有人可以给我任何指示，我将不胜感激！

document.addEventListener("DOMContentLoaded", function(event)){
var audio = document.getElementsByTagName('audio')[0];

  workit.addEventListener('click' function());

Answer 1

您可能需要将每个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>

现在，您可以按特定的id查找每个标签。

但是，如果仅在audio标签中允许controls ，则用户将可以单击默认浏览器播放器并播放文件，而无需任何其他代码。

<audio controls>
   <source ... etc
</audio>

但是，如果不存在controls （或将controls="false"设置为controls="false" ），则默认浏览器播放器将不会出现。 我想这就是您要追求的，因为您希望通过单击事件来播放音频文件。

音频标签id不一定对您有帮助，因为如果没有controls ，浏览器中不会显示任何内容以供单击，在这种情况下，您需要将表中所有其包含的td标签作为目标。

如果尚未添加id属性到音频表（例如“ audio-table”），则可以使用在页面加载时调用的函数将.addEventListener()放入每个td-box； 就像是...

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="audio-A"的td标签内的音频标签中添加了id="audio-A" id="A" 。 “ 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();
}

这里还有其他事情要考虑。 您是否希望浏览器同时播放音频文件？ 您是否希望用户能够停止音频剪辑？ 现在我们有了它，您可以快速连续单击所有框，浏览器将尝试相互播放所有音频文件。 另外，如果在播放音频文件时单击一个框，则会引发一些问题。

尽管如此，这应该足以让您入门。 如果您需要进一步说明，请发表评论。

同时，这是MDN的音频标签页，仅供参考。