feat: jingle when enter app

src/components/EntryJingle.web.js

@@ -0,0 +1,60 @@
+import { Asset } from 'expo-asset'
+import { useEffect } from 'react'
+
+const entryJingle = require('../assets/audio/musicland-entry.wav')
+
+const EntryJingle = ({ active }) => {
+  useEffect(() => {
+    if (!active) {
+      return undefined
+    }
+
+    const audio = new Audio(Asset.fromModule(entryJingle).uri)
+    let isDisposed = false
+    let isWaitingForInteraction = false
+
+    audio.loop = false
+    audio.preload = 'auto'
+    audio.volume = 0.32
+
+    const removeInteractionListeners = () => {
+      document.removeEventListener('pointerdown', handleFirstInteraction)
+      document.removeEventListener('keydown', handleFirstInteraction)
+      isWaitingForInteraction = false
+    }
+
+    const play = () => {
+      audio
+        .play()
+        .then(removeInteractionListeners)
+        .catch(() => {
+          if (isDisposed || isWaitingForInteraction) {
+            return
+          }
+          isWaitingForInteraction = true
+          document.addEventListener('pointerdown', handleFirstInteraction, { once: true })
+          document.addEventListener('keydown', handleFirstInteraction, { once: true })
+        })
+    }
+
+    function handleFirstInteraction() {
+      if (!isDisposed) {
+        play()
+      }
+    }
+
+    play()
+
+    return () => {
+      isDisposed = true
+      removeInteractionListeners()
+      audio.pause()
+      audio.removeAttribute('src')
+      audio.load()
+    }
+  }, [active])
+
+  return null
+}
+
+export default EntryJingle