I am using react-native-sound for audio in this component and want to play from a url file that is passed to the component. The problem is that if the var audio is declared inside the functional component then each time the component renders the variable is created again and this plays the sound file as a new instance and we have same sound playing multiple times on top of each other.
import Sound from "react-native-sound"
var audio = new Sound.. //Works if declared here but cant's pass url prop
const SoundPlayer: FC<SoundProps> = ({ url }) => {
const [playing, setPlaying] = useState<boolean | null>(null)
var audio = new Sound(url, null, (error) => {
if (error) {
console.log("failed to load the sound", error)
return
}
})
If I move the var audio outside / above the functional component as a global variable it works fine but then I can not pass the component prop aka url to it as the variable is out of the function component scope. How can I pass a prop that keeps reference and does not recreate on each render?
Try using useEffect:
const audioRef = useRef(null);
const [duration, setDuration] = useState(0);
useEffect(() => {
// This will be triggered only once when the component is mounted
audioRef.current = new Sound(url, null, (error) => {
if(error) {
// Here you can implement some retry policy if there was some error loading the sound
return;
}
setDuration(Math.trunc(audioRef.current.getDuration()));
});
return = () => {
// This will be triggered on component is unmounted
audioRef.current.release();
}
}, [audioRef, setDuration]);
P.D.: This code was written on the fly, so further modifications might be needed
This is the correct use case for useRef (https://reactjs.org/docs/hooks-reference.html#useref)
import Sound from "react-native-sound"
const SoundPlayer: FC<SoundProps> = ({ url }) => {
const audioRef = useRef(null);
const [playing, setPlaying] = useState<boolean | null>(null)
// use useEffect to hook on mounted
useEffect(() => {
if(audioRef.current === null) {
audioRef.current = new Sound(url, null, (error) => {
if (error) {
console.log("failed to load the sound", error)
return
}
})
}
}, [])
For example
import Sound from "react-native-sound"
var audio;
const SoundPlayer: FC<SoundProps> = ({ url }) => {
const [playing, setPlaying] = useState<boolean | null>(null)
useEffect(() => {
audio = new Sound(url, null, (error) => {
if (error) {
console.log("failed to load the sound", error)
return
}
})
}, [url]);