diff --git a/public/index.html b/public/index.html
index 56ec245e..e05b1b83 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,6 +26,7 @@
         autoPlay: false,
       },
     });
+    window.$c = component;
     component.addEventListener('finish', () => console.log('finish'));
   </script>
 </html>
diff --git a/src/Controller.svelte b/src/Controller.svelte
index 3140f199..22e30c58 100644
--- a/src/Controller.svelte
+++ b/src/Controller.svelte
@@ -102,7 +102,7 @@
     }
   };
 
-  const toggle = () => {
+  export const toggle = () => {
     switch (playerState) {
       case 'playing':
         replayer.pause();
@@ -142,7 +142,7 @@
     }
   };
 
-  const setSpeed = (newSpeed: number) => {
+  export const setSpeed = (newSpeed: number) => {
     let needFreeze = playerState === 'playing';
     speed = newSpeed;
     if (needFreeze) {
@@ -154,6 +154,10 @@
     }
   };
 
+  export const toggleSkipInactive = () => {
+    skipInactive = !skipInactive;
+  };
+
   onMount(() => {
     playerState = replayer.service.state.value as typeof playerState;
     speedState = replayer.speedService.state.value as typeof speedState;
@@ -320,7 +324,7 @@
     </div>
     <div class="rr-controller__btns">
       <button on:click={toggle}>
-        {#if ['playing', 'skipping'].includes(playerState)}
+        {#if playerState === 'playing'}
           <svg
             class="icon"
             viewBox="0 0 1024 1024"
diff --git a/src/Player.svelte b/src/Player.svelte
index 4eeed4a3..db276b61 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -32,6 +32,11 @@
   let fullscreenListener: undefined | (() => void);
   let _width: number = width;
   let _height: number = height;
+  let controller: {
+    toggle: () => void;
+    setSpeed: (speed: number) => void;
+    toggleSkipInactive: () => void;
+  };
 
   let style: string;
   $: style = inlineCss({
@@ -54,7 +59,7 @@
       `scale(${Math.min(widthScale, heightScale)})` + 'translate(-50%, -50%)';
   };
 
-  const fullscreen = () => {
+  export const toggleFullscreen = () => {
     if (player) {
       isFullscreen() ? exitFullscreen() : openFullscreen(player);
     }
@@ -68,6 +73,17 @@
     replayer.addEvent(event);
   };
 
+  // by pass controller methods as public API
+  export const toggle = () => {
+    controller.toggle();
+  };
+  export const setSpeed = (speed: number) => {
+    controller.setSpeed(speed);
+  };
+  export const toggleSkipInactive = () => {
+    controller.toggleSkipInactive();
+  };
+
   onMount(() => {
     // runtime type check
     if (speedOption !== undefined && typeOf(speedOption) !== 'array') {
@@ -167,12 +183,13 @@
   <div class="rr-player__frame" bind:this={frame} {style} />
   {#if replayer}
     <Controller
+      bind:this={controller}
       {replayer}
       {showController}
       {autoPlay}
       {speedOption}
       {skipInactive}
       {tags}
-      on:fullscreen={() => fullscreen()} />
+      on:fullscreen={() => toggleFullscreen()} />
   {/if}
 </div>
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 72b23589..a44558a1 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -20,4 +20,7 @@ export default class rrwebPlayer {
   addEventListener(event: string, handler: () => unknown): void;
 
   addEvent(event: eventWithTime): void;
+  toggle: () => void;
+  setSpeed: (speed: number) => void;
+  toggleSkipInactive: () => void;
 }