⚡ (audio) Implement more robust auto play

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx

@@ -13,22 +13,34 @@ const typingDuration = 500
 let typingTimeout: NodeJS.Timeout
 
 export const AudioBubble = (props: Props) => {
+  let isPlayed = false
   let ref: HTMLDivElement | undefined
   let audioElement: HTMLAudioElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
+  const endTyping = () => {
+    if (isPlayed) return
+    isPlayed = true
+    setIsTyping(false)
+    setTimeout(
+      () => props.onTransitionEnd(ref?.offsetTop),
+      showAnimationDuration
+    )
+  }
+
   onMount(() => {
-    typingTimeout = setTimeout(() => {
-      setIsTyping(false)
-      setTimeout(() => {
-        const audioElement = ref?.querySelector('audio')
-        if (audioElement)
-          audioElement
-            .play()
-            .catch((e) => console.warn('Could not autoplay the audio:', e))
-        props.onTransitionEnd(ref?.offsetTop)
-      }, showAnimationDuration)
-    }, typingDuration)
+    typingTimeout = setTimeout(endTyping, typingDuration)
+    audioElement?.addEventListener(
+      'canplay',
+      () => {
+        clearTimeout(typingTimeout)
+        audioElement
+          ?.play()
+          .catch((e) => console.warn("Couldn't autoplay audio", e))
+        endTyping()
+      },
+      { once: true }
+    )
   })
 
   onCleanup(() => {

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",