Audio Hook

components/global/beat.tsx

@@ -3,8 +3,13 @@ import { View, Text, Pressable } from "react-native";
 import Entypo from "@expo/vector-icons/Entypo";
 import { beat } from "@/types";
 import AntDesign from "@expo/vector-icons/AntDesign";
+import useAudio from "@/hooks/useAudio";
 
 const Drop = ({ image, artist, song, location, length, onAdd }: beat) => {
+  const { playing, play, pause } = useAudio(
+    "https://www.bensound.com/bensound-music/bensound-oblivion.mp3",
+  );
+
   return (
     <View className="flex flex-row items-center gap-4 p-2">
       <View className="w-[50] h-[50] rounded-lg overflow-hidden">
@@ -31,9 +36,16 @@ const Drop = ({ image, artist, song, location, length, onAdd }: beat) => {
               </Text>
             </Pressable>
           )}
-          <View className="bg-beatdrop-primary rounded-full p-2">
-            <Entypo name="controller-play" size={24} color="white" />
-          </View>
+          <Pressable
+            className="bg-beatdrop-primary rounded-full p-2"
+            onPress={() => (playing ? pause : play)}
+          >
+            {playing ? (
+              <Entypo name="controller-paus" size={24} color="white" />
+            ) : (
+              <Entypo name="controller-play" size={24} color="white" />
+            )}
+          </Pressable>
         </View>
       </View>
     </View>

hooks/useAudio.tsx

@@ -0,0 +1,41 @@
+import { useState, useEffect } from "react";
+import { Audio } from "expo-av";
+
+const useAudio = (
+  url: string,
+): { playing: boolean; play: () => void; pause: () => void } => {
+  const [audio, setAudio] = useState<Audio.Sound>();
+  const [playing, setPlaying] = useState<boolean>(false);
+
+  const play = () => setPlaying(true);
+  const pause = () => setPlaying(false);
+
+  useEffect(() => {
+    const load = async () => {
+      const { sound: playbackObject } = await Audio.Sound.createAsync(
+        { uri: url },
+        { shouldPlay: false },
+      );
+
+      setAudio(playbackObject);
+    };
+
+    if (!audio) load();
+
+    return () => {
+      if (audio) audio.unloadAsync();
+    };
+  }, [url, audio]);
+
+  useEffect(() => {
+    if (playing) {
+      audio?.playAsync();
+    } else {
+      audio?.pauseAsync();
+    }
+  }, [audio, playing]);
+
+  return { playing: playing, play: play, pause: pause };
+};
+
+export default useAudio;

package.json

@@ -41,7 +41,8 @@
     "react-native-screens": "3.31.1",
     "react-native-simple-default-props": "^1.0.0",
     "react-native-toast-message": "^2.2.0",
-    "react-native-web": "~0.19.10"
+    "react-native-web": "~0.19.10",
+    "expo-av": "~14.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",