Hello. Could you help me?
I have the video and audio. Each of them has separated source. Video is muted.
Video and audio should be looped. Video is limited to 10 sec, audio - 1 min.
Hello. Could you help me?
I have the video and audio. Each of them has separated source. Video is muted.
Video and audio should be looped. Video is limited to 10 sec, audio - 1 min.
const UserVideoCard = ({
name,
age,
city,
coubPermalink,
style,
selectUser
}) => {
const [isPaused, setIsPaused] = useState(false)
const [videoAudioUrl, setVideoAudioUrl] = useState({
video: '',
audio: ''
})
useEffect(() => {
// we should clean up each async fetch to avoid memory leak
// https://dev.to/pallymore/clean-up-async-requests-in-useeffect-hooks-90h
const abortController = new AbortController()
const videoResponse = async () => {
try {
const videoResponseJSON = await fetch(
`https://coub.com/api/v2/coubs/${coubPermalink}`,
{ signal: abortController.signal }
)
const transformedData = await videoResponseJSON.json()
const getVideoAudioUrl = transformedData.file_versions.mobile
const transformedVideoAudioUrl = {
video: getVideoAudioUrl.video,
audio: getVideoAudioUrl.audio[1]
}
setVideoAudioUrl(transformedVideoAudioUrl)
} catch (error) {
// only throw the error when we know the fetch was not aborted
if (!abortController.signal.aborted) {
throw new Error('Video and audio data not fetched')
}
}
}
videoResponse()
return () => {
abortController.abort()
}
}, [coubPermalink])
const { width } = Dimensions.get('window')
const height = (width / 9) * 15
const handlerPauseVideo = () => {
setIsPaused(!isPaused)
}
const playbackObject = new Audio.Sound()
useEffect(() => {
console.log(videoAudioUrl.audio)
const playback = async () => {
try {
await playbackObject.loadAsync({ uri: videoAudioUrl.audio })
// await playbackObject.playAsync()
} catch (error) {
throw new Error('sound is not loaded')
}
}
playback()
}, [videoAudioUrl])
useEffect(() => {
const playStopAudio = async () => {
if (isPaused) {
await playbackObject.pauseAsync()
} else {
await playbackObject.playAsync()
}
}
playStopAudio()
}, [isPaused])
return (
<Video
source={{ uri: videoAudioUrl.video }}
shouldPlay={isPaused}
rate={1.0}
volume={1}
isMuted={false}
resizeMode='cover'
isLooping
style={styles.video}
/>
The issue:
Error: Cannot complete operation because sound in not loaded.
How to fix it?
Thank you.
I tried different solutions, but they are outdated: Play/Pause a sound - Snack
Maybe you know how implement correctly play/pause functionality for Audio?
Because with video is very easy via shouldPlay prop!
Thank you once again!