implement keyboard shortcut to quick replay clips

1 files changed, 16 insertions, 1 deletions

diff --git a/app.js b/app.js
index 719b6ed..79ea6e8 100644
--- a/app.js
+++ b/app.js
@@ -15,6 +15,22 @@ clearBtn.addEventListener("click", _event => {
   clips.textContent = "";
 });
 
+function onNthClip(index, action) {
+  if (index < 0 || clips.children.length <= index - 1) return;
+  const clip = clips.children[index - 1].querySelector("audio");
+  action(clip);
+}
+
+document.addEventListener("keydown", event => {
+  if (event.key.match(/[1-9]/))
+    onNthClip(parseInt(event.key), clip => clip.play());
+});
+
+document.addEventListener("keyup", event => {
+  if (event.key.match(/[1-9]/))
+    onNthClip(parseInt(event.key), clip => stopPlayer(clip));
+});
+
 function stopPlayer(player) {
   player.pause();
   player.currentTime = 0;
@@ -66,7 +82,6 @@ function onGetDeviceSuccess(stream) {
 
     // TODO: record blob and list to local persistent storage
     // TODO: buttons to clear individual clips
-    // TODO: keyboard shortcut to play clips for the ten last indexes
 
     clips.prepend(wrapElement("li", audioElement));