How to play video and audio synchronized from different sources

Expo CLI 3.13.1 environment info:
System:
OS: Windows 10
Binaries:
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.5.0.0 AI-191.8026.42.35.6010548

Summary

This text will be hidden

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.

Now I have:

    const videoResponse = async () => {
      try {
        const videoResponseJSON = await fetch(
          `https://coub.com/api/v2/coubs/${coubPermalink}`
        )
        const transformedData = await videoResponseJSON.json()
        const getVideoAudioUrl = transformedData.file_versions.mobile
        const transformedVideoAudioUrl = {
          video: getVideoAudioUrl.video,
          audio: getVideoAudioUrl.audio[0]
        }
        setVideoAudioUrl(transformedVideoAudioUrl)
      } catch (error) {
        throw new Error('Video and audio data not fetched')
      }
    }


  const handlerPauseVideo = () => {
    setIsPaused(!isPaused)
  }

<Video

          source={{ uri: videoAudioUrl.video }}

          shouldPlay={isPaused}

          rate={1.0}

          volume={0}

          isMuted={false}

          resizeMode='cover'

          isLooping

          style={styles.video}

        />

But how to add audio synchronized and link to the video ?
Thank you.

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.

Now I have:

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}
        />
  1. The issue:
    Error: Cannot complete operation because sound in not loaded.
    How to fix it?
    Thank you.

  2. I tried different solutions, but they are outdated:
    https://snack.expo.io/SkjbMrFGM
    Maybe you know how implement correctly play/pause functionality for Audio?

Because with video is very easy via shouldPlay prop!
Thank you once again!

  1. Yes, read the docs https://docs.expo.io/versions/latest/sdk/audio/#audiosound

But I need load sound only on pressings Play button

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.