在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的音頻標簽頁，僅供參考。