Skip to content

Instantly share code, notes, and snippets.

@mhull mhull/_0.key-template.html
Last active Dec 13, 2016

Embed
What would you like to do?
Playing audio files using JS and HTML, experimentations based on JavaScript30 Day 1
<!-- 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>
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()
// Call the Key binding function on all of our keys
keys.forEach( key => Key.call( key ) );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.