Pausing react native expo Audio? - reactjs

Question

Im having no problem running audio but im having trouble pausing it. If anyone can help that would be great.
async function playMusic() {
const soundObject = new Audio.Sound();
console.log("Being hit")
try {
await soundObject.loadAsync({uri:'https://firebasestorage.googleapis.com/v0/b/o/myFolder%2FMello%20C%20-%20Easy.mp3?c4e-4bf8-b8ea-dcc201efff44'});
await soundObject.playAsync();
} catch (error) {
alert("Error" + error.message)
}
}
async function stopMusic() {
console.log("Not Being hit")
const soundObject = new Audio.Sound();
try {
await soundObject.loadAsync({uri:'https://firebasestorage.googleapis.com/v03?alt=media&token=e44f7b2f-8c4e-4bf8-b8ea-dcc201efff44'});
await soundObject.stopAsync();
} catch (error) {
alert("Error" + error.message)
}
}

Answer 1

See we should never create Sound instance as a state variable. Because whenever there is a re-render, it re-initializes the sound instance.
You should create a ref variable and use it,
const sound = React.useRef(new Audio.Sound());
Working Example
Implementation of Pause/Play music
import * as React from 'react';
import {
Text,
View,
StyleSheet,
ActivityIndicator,
Button,
} from 'react-native';
import Constants from 'expo-constants';
import { Audio } from 'expo-av';
const SampleTrack = require('./Roses.m4a');
export default function App() {
const [Loaded, SetLoaded] = React.useState(false);
const [Loading, SetLoading] = React.useState(false);
const sound = React.useRef(new Audio.Sound());
React.useEffect(() => {
LoadAudio();
}, []);
const PlayAudio = async () => {
try {
const result = await sound.current.getStatusAsync();
if (result.isLoaded) {
if (result.isPlaying === false) {
sound.current.playAsync();
}
}
} catch (error) {}
};
const PauseAudio = async () => {
try {
const result = await sound.current.getStatusAsync();
if (result.isLoaded) {
if (result.isPlaying === true) {
sound.current.pauseAsync();
}
}
} catch (error) {}
};
const LoadAudio = async () => {
SetLoading(true);
const checkLoading = await sound.current.getStatusAsync();
if (checkLoading.isLoaded === false) {
try {
const result = await sound.current.loadAsync(SampleTrack, {}, true);
if (result.isLoaded === false) {
SetLoading(false);
console.log('Error in Loading Audio');
} else {
SetLoading(false);
SetLoaded(true);
}
} catch (error) {
console.log(error);
SetLoading(false);
}
} else {
SetLoading(false);
}
};
return (
<View style={styles.container}>
<View style={styles.AudioPLayer}>
{Loading ? (
<ActivityIndicator size={'small'} color={'red'} />
) : (
<>
{Loaded === false ? (
<>
<ActivityIndicator />
<Text>Loading Song</Text>{' '}
</>
) : (
<>
<Button title="Play Song" onPress={PlayAudio} />
<Button title="Pause Song" onPress={PauseAudio} />
</>
)}
</>
)}
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
AudioPLayer: {
width: '100%',
height: 50,
alignItems: 'center',
},
});