Playing audio files using JS and HTML, experimentations based on JavaScript30 Day 1

_0.key-template.html

<!-- Key template -->
<script type='text/html' id='key-template'>
  <kbd>{{ key.key }}</kbd>
  <span class='sound'>{{ key.name }}</span>
  <audio src="sounds/{{ key.name }}.wav"></audio>
</script>

_1.key-template.js

var keyTemplate = document.querySelector( '#key-template' );

_2.keys-array.js

var keys = [
  {
    key: 'Q',
    name: 'Blurp',
    code: 81,

  },
  {
    key: 'W',
    name: 'Reow',
    code: 87,
  },
  {
    key: 'E',
    name: 'Slippery',
    code: 69,
  },
  // ... etc
];

_3.key-factory.js

/**
 * Key binding method
 *
 * Expects to be called via `Key.call()` on items from `keys` array
 */
var Key = function() {

  var key = this;

  /**
   * Create the DOM element from the template
   */
  key.element = document.createElement('div');
  key.element.classList.add('key');
  
  // replace the template tags with the data for this key
  key.element.innerHTML = keyTemplate.innerHTML.replace( 
    /{{ key\.(key|name|code) }}/g, 
    ( fullMatch, match ) => key[ match ] 
  );
  
  // ... etc ...

  // the audio element for this key
  key.audio = key.element.querySelector('audio');
  
  // play the sound file associated with this key
  key.play = function () {

    // ... etc ...
  }
} // end: Key()

_4.key-binding.js

// Call the Key binding function on all of our keys
keys.forEach( key => Key.call( key ) );