diff --git a/public/index.html b/public/index.html
index e05b1b83..6cedf6c4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,5 +28,6 @@
     });
     window.$c = component;
     component.addEventListener('finish', () => console.log('finish'));
+    // component.addEventListener('ui-update-progress', console.log);
   </script>
 </html>
diff --git a/src/Controller.svelte b/src/Controller.svelte
index 22e30c58..54737320 100644
--- a/src/Controller.svelte
+++ b/src/Controller.svelte
@@ -26,6 +26,9 @@
   export let tags: Record<string, string> = {};
 
   let currentTime = 0;
+  $: {
+    dispatch('ui-update-current-time', { payload: currentTime });
+  }
   let timer: number | null = null;
   let playerState: 'playing' | 'paused' | 'live';
   let speedState: 'normal' | 'skipping';
@@ -39,6 +42,7 @@
   $: {
     const percent = Math.min(1, currentTime / meta.totalTime);
     percentage = `${100 * percent}%`;
+    dispatch('ui-update-progress', { payload: percent });
   }
   type CustomEvent = {
     name: string;
diff --git a/src/Player.svelte b/src/Player.svelte
index db276b61..528da5b6 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -36,7 +36,7 @@
     toggle: () => void;
     setSpeed: (speed: number) => void;
     toggleSkipInactive: () => void;
-  };
+  } & Controller;
 
   let style: string;
   $: style = inlineCss({
@@ -65,8 +65,18 @@
     }
   };
 
-  export const addEventListener = (event: string, handler: () => unknown) => {
+  export const addEventListener = (
+    event: string,
+    handler: (detail: unknown) => unknown,
+  ) => {
     replayer.on(event, handler);
+    switch (event) {
+      case 'ui-update-current-time':
+      case 'ui-update-progress':
+        controller.$on(event, ({ detail }) => handler(detail));
+      default:
+        break;
+    }
   };
 
   export const addEvent = (event: eventWithTime) => {