var keyTemplate = document.querySelector( '#key-template' ); var keys = [ { key: 'Q', name: 'Blurp', code: 81, }, { key: 'W', name: 'Reow', code: 87, }, { key: 'E', name: 'Slippery', code: 69, }, // ... etc ]; /** * 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()