diff --git a/playwright.config.ts b/playwright.config.ts
index dd54b88..54aabba 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -19,6 +19,12 @@ const config: PlaywrightTestConfig = {
     actionTimeout: 0,
     baseURL,
     trace: 'on-first-retry',
+    headless: false,
+    video: 'on',
+    launchOptions: {
+      ignoreDefaultArgs: ['--mute-audio', '--disable-audio-output'],
+      slowMo: 3000,
+    },
   },
   projects: [
     {
diff --git a/public/audio.mp3 b/public/audio.mp3
new file mode 100644
index 0000000..23c2e3a
Binary files /dev/null and b/public/audio.mp3 differ
diff --git a/src/app/views/demo/Demo.view.tsx b/src/app/views/demo/Demo.view.tsx
index bee3948..c566bef 100644
--- a/src/app/views/demo/Demo.view.tsx
+++ b/src/app/views/demo/Demo.view.tsx
@@ -15,6 +15,7 @@ const DemoView: Component = () => {
   const [muted, setMuted] = createSignal(false);
   const [profile, setProfile] = createSignal<Profile>('personal');
   const [searchParams] = useSearchParams();
+  let audioElem;
 
   const increment = () => {
     setCount((prev) => (prev += 1));
@@ -25,7 +26,14 @@ const DemoView: Component = () => {
   };
 
   const handleMuteInput = () => {
-    setMuted((old) => !old);
+    const existingState = muted();
+    const newState = !existingState;
+    if (newState) {
+      audioElem.play();
+    } else {
+      audioElem.pause();
+    }
+    setMuted(newState);
   };
 
   const handleProfileChange = (event: Event) => {
@@ -145,6 +153,12 @@ const DemoView: Component = () => {
                 </strong>
                 <span>(click to toggle)</span>
               </label>
+              <audio
+                src="/audio.mp3"
+                ref={audioElem}
+                controls
+                loop
+              />
             </div>
             <Show when={muted()}>
               <p class={demoStyles.demoInteractionDesc}>