From 019a392e963631b59ec9c465c46d3d862c7c67ca Mon Sep 17 00:00:00 2001 From: seanquiambao Date: Thu, 22 Aug 2024 21:29:48 -0700 Subject: [PATCH 1/4] installed expo-av, created an audio react hook --- components/global/beat.tsx | 21 ++++++++++++++++++--- hooks/useAudio.tsx | 38 ++++++++++++++++++++++++++++++++++++++ package-lock.json | 9 +++++++++ package.json | 3 ++- 4 files changed, 67 insertions(+), 4 deletions(-) create mode 100644 hooks/useAudio.tsx diff --git a/components/global/beat.tsx b/components/global/beat.tsx index 1719555..4e8d9f4 100644 --- a/components/global/beat.tsx +++ b/components/global/beat.tsx @@ -3,8 +3,14 @@ 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"; +import { useEffect } from "react"; const Drop = ({ image, artist, song, location, length, onAdd }: beat) => { + const [playing, audioToggle] = useAudio( + "https://www.bensound.com/bensound-music/bensound-oblivion.mp3", + ); + return ( @@ -31,9 +37,18 @@ const Drop = ({ image, artist, song, location, length, onAdd }: beat) => { )} - - - + { + audioToggle(); + }} + > + {playing ? ( + + ) : ( + + )} + diff --git a/hooks/useAudio.tsx b/hooks/useAudio.tsx new file mode 100644 index 0000000..fc06fb6 --- /dev/null +++ b/hooks/useAudio.tsx @@ -0,0 +1,38 @@ +import { useState, useEffect } from "react"; +import { Audio } from "expo-av"; + +const useAudio = (url: string): [boolean, () => void] => { + const [audio, setAudio] = useState(); + const [playing, setPlaying] = useState(false); + + const audioToggle = () => { + setPlaying(!playing); + }; + + const load = async () => { + const { sound: playbackObject } = await Audio.Sound.createAsync( + { uri: url }, + { shouldPlay: false }, + ); + + setAudio(playbackObject); + }; + + useEffect(() => { + if (!audio) load(); + + return audio + ? () => { + audio.unloadAsync(); + } + : undefined; + }, [audio]); + + useEffect(() => { + playing ? audio?.playAsync() : audio?.pauseAsync(); + }, [playing]); + + return [playing, audioToggle]; +}; + +export default useAudio; diff --git a/package-lock.json b/package-lock.json index 3862f25..33f1f43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@gorhom/bottom-sheet": "^4.6.4", "@react-navigation/native": "^6.0.2", "expo": "~51.0.25", + "expo-av": "~14.0.7", "expo-constants": "~16.0.2", "expo-font": "~12.0.9", "expo-image": "~1.12.13", @@ -11258,6 +11259,14 @@ "expo": "*" } }, + "node_modules/expo-av": { + "version": "14.0.7", + "resolved": "https://registry.npmjs.org/expo-av/-/expo-av-14.0.7.tgz", + "integrity": "sha512-FvKZxyy+2/qcCmp+e1GTK3s4zH8ZO1RfjpqNxh7ARlS1oH8HPtk1AyZAMo52tHz3yQ3UIqxQ2YbI9CFb4065lA==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-constants": { "version": "16.0.2", "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-16.0.2.tgz", diff --git a/package.json b/package.json index bfed0c7..a924ed0 100644 --- a/package.json +++ b/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", From bfd967b40f03dbca74ba207c71b1da98075b24d8 Mon Sep 17 00:00:00 2001 From: seanquiambao Date: Thu, 22 Aug 2024 21:37:58 -0700 Subject: [PATCH 2/4] resolved some linting errors. idk why eslint thinks theres an unused expression? --- components/global/beat.tsx | 1 - hooks/useAudio.tsx | 20 ++++++++++---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/components/global/beat.tsx b/components/global/beat.tsx index 4e8d9f4..cfb7104 100644 --- a/components/global/beat.tsx +++ b/components/global/beat.tsx @@ -4,7 +4,6 @@ import Entypo from "@expo/vector-icons/Entypo"; import { beat } from "@/types"; import AntDesign from "@expo/vector-icons/AntDesign"; import useAudio from "@/hooks/useAudio"; -import { useEffect } from "react"; const Drop = ({ image, artist, song, location, length, onAdd }: beat) => { const [playing, audioToggle] = useAudio( diff --git a/hooks/useAudio.tsx b/hooks/useAudio.tsx index fc06fb6..3d6d447 100644 --- a/hooks/useAudio.tsx +++ b/hooks/useAudio.tsx @@ -9,16 +9,16 @@ const useAudio = (url: string): [boolean, () => void] => { setPlaying(!playing); }; - const load = async () => { - const { sound: playbackObject } = await Audio.Sound.createAsync( - { uri: url }, - { shouldPlay: false }, - ); + useEffect(() => { + const load = async () => { + const { sound: playbackObject } = await Audio.Sound.createAsync( + { uri: url }, + { shouldPlay: false }, + ); - setAudio(playbackObject); - }; + setAudio(playbackObject); + }; - useEffect(() => { if (!audio) load(); return audio @@ -26,11 +26,11 @@ const useAudio = (url: string): [boolean, () => void] => { audio.unloadAsync(); } : undefined; - }, [audio]); + }, [url, audio]); useEffect(() => { playing ? audio?.playAsync() : audio?.pauseAsync(); - }, [playing]); + }, [audio, playing]); return [playing, audioToggle]; }; From 4044d147e249a627c2d3a9c347795f22a8dae126 Mon Sep 17 00:00:00 2001 From: seanquiambao Date: Thu, 22 Aug 2024 21:47:45 -0700 Subject: [PATCH 3/4] lint --- hooks/useAudio.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/hooks/useAudio.tsx b/hooks/useAudio.tsx index 3d6d447..e77a0e1 100644 --- a/hooks/useAudio.tsx +++ b/hooks/useAudio.tsx @@ -29,7 +29,11 @@ const useAudio = (url: string): [boolean, () => void] => { }, [url, audio]); useEffect(() => { - playing ? audio?.playAsync() : audio?.pauseAsync(); + if (playing) { + audio?.playAsync(); + } else { + audio?.pauseAsync(); + } }, [audio, playing]); return [playing, audioToggle]; From 65b435890e4e72830892c9def837e0045a14105d Mon Sep 17 00:00:00 2001 From: seanquiambao Date: Thu, 22 Aug 2024 22:12:19 -0700 Subject: [PATCH 4/4] object return + explicit play pause functions --- components/global/beat.tsx | 6 ++---- hooks/useAudio.tsx | 19 +++++++++---------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/components/global/beat.tsx b/components/global/beat.tsx index cfb7104..9dccd8d 100644 --- a/components/global/beat.tsx +++ b/components/global/beat.tsx @@ -6,7 +6,7 @@ import AntDesign from "@expo/vector-icons/AntDesign"; import useAudio from "@/hooks/useAudio"; const Drop = ({ image, artist, song, location, length, onAdd }: beat) => { - const [playing, audioToggle] = useAudio( + const { playing, play, pause } = useAudio( "https://www.bensound.com/bensound-music/bensound-oblivion.mp3", ); @@ -38,9 +38,7 @@ const Drop = ({ image, artist, song, location, length, onAdd }: beat) => { )} { - audioToggle(); - }} + onPress={() => (playing ? pause : play)} > {playing ? ( diff --git a/hooks/useAudio.tsx b/hooks/useAudio.tsx index e77a0e1..d0ab15b 100644 --- a/hooks/useAudio.tsx +++ b/hooks/useAudio.tsx @@ -1,13 +1,14 @@ import { useState, useEffect } from "react"; import { Audio } from "expo-av"; -const useAudio = (url: string): [boolean, () => void] => { +const useAudio = ( + url: string, +): { playing: boolean; play: () => void; pause: () => void } => { const [audio, setAudio] = useState(); const [playing, setPlaying] = useState(false); - const audioToggle = () => { - setPlaying(!playing); - }; + const play = () => setPlaying(true); + const pause = () => setPlaying(false); useEffect(() => { const load = async () => { @@ -21,11 +22,9 @@ const useAudio = (url: string): [boolean, () => void] => { if (!audio) load(); - return audio - ? () => { - audio.unloadAsync(); - } - : undefined; + return () => { + if (audio) audio.unloadAsync(); + }; }, [url, audio]); useEffect(() => { @@ -36,7 +35,7 @@ const useAudio = (url: string): [boolean, () => void] => { } }, [audio, playing]); - return [playing, audioToggle]; + return { playing: playing, play: play, pause: pause }; }; export default useAudio;