Use of HTML5 audio tags with JavaScript

Question

I want to set up audio links for a grid of 16 audio files using HTML, CSS and JavaScript. The idea is for a link to a separate audio file in each box in the grid.

I thought using a table might work for this and have created one with HTML/CSS. I used TD cells as follows:

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

I then tried to set up event listeners/getElementsByTagName using JS as follows but have got into a right old muddle. If anyone could give me any pointers I'd be very grateful!

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

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

Answer 1

You may need to target the audio tag inside each td , but as yet have no unique identifier to help with that task. A small addition to your code could solve this...

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

Now you can find each tag by a specific id .

Nonetheless, if you simply allow controls in the audio tag users will be able to click the default browser player and play the file without any further code.

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

However if controls are not present (or set to controls="false" ) the default browser player will not appear. I presume this is what you're after because you're looking to play the audio-file with a click-event.

Audio-tag id s aren't necessarily helpful at this point as without controls nothing is displayed in the browser to click on, in which case you'll need to target all their containing td tags in the table.

If you haven't already done so add an id attribute to the audio table (eg: 'audio-table'), then you can .addEventListener() to each td-box with a function called on page load; something like...

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

Now when a td in the table is clicked the playAudio() function will fire. All that's needed now is that function. This is where paying attention to the html markup can really help.

In the first code-example above I added id="audio-A" to the audio-tag inside a td-tag with id="A" . That 'A' (or 'B' or 'C' etc) can come in really handy now.

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

There are other things to consider here. Do you want the browser to play audio files simultaneously? Do you want users to be able to stop an audio clip? As we have it now you could click all the boxes in quick succession and the browser would try and play all the audio files over each other. Also if you click a box while that audio file is playing you'll throw up some issues.

Still, that should be enough to get you started. Please comment if you need further clarification.

In the meantime, here's MDN's audio-tag page for reference.