Question 236060 in React native Question posted in
The official React Native documentation can be found here.

How to i add a background music to a video in React Native?

How do I add background music to a video in React Native? using ffmpeg-kit? https://github.com/arthenica/ffmpeg-kit/tree/main/react-native

I have a video in my project root folder, But the audio I want to add is a remote URL stored in the cloud music link is https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4

Can anyone give me a basic example to do this in React Native?

Tags:

2

Answers


  1. 0

    you can insert a muted video and simultaneously play audio in a React Native app using different libraries. react-native-video is one of the most commonly used libraries for video playback in React Native. However, the react-native-video library itself does not support audio playback. To achieve the desired effect, you can combine react-native-video with the react-native-sound library.

    import React, { useEffect } from 'react';
import { View } from 'react-native';
import Video from 'react-native-video';
import Sound from 'react-native-sound';

const App = () => {
  useEffect(() => {
    // Set the video to mute
    Sound.setCategory('Playback'); // Enable background audio
    const audio = new Sound('path-to-your-audio.mp3', Sound.MAIN_BUNDLE, error => {
      if (error) {
        console.log('Error playing audio:', error);
        return;
      }
      // Play the audio
      audio.play();
    });
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <Video
        source={require('path-to-your-video.mp4')}
        style={{ flex: 1 }}
        muted // Set the video to mute
        resizeMode="cover"
        repeat
      />
    </View>
  );
};

export default App;

    Be sure to replace ‘path-to-your-video.mp4’ and ‘path-to-your-audio.mp3’ with the correct paths to your video and audio files.

    Important notes:

    Ensure that the audio and video you’re using have formats supported by their respective libraries.
    Sound.setCategory(‘Playback’) is used to enable background audio on iOS.
    This example is simplified, and you might want to add more robust playback controls and error handling.
    Please note that the user experience and the behavior of the app in the background might vary based on device configurations and operating system restrictions.

    Login or Signup to reply.
  2. 0

    you can use ffmpeg-kit-react-native to add audio as background in your video

    sample code :

    import React from 'react';
import { View, Button } from 'react-native';
import { executeFFmpeg } from 'ffmpeg-kit-react-native';

const AddBackgroundMusicScreen = () => {
  const addBackgroundMusic = async () => {
    const videoPath = 'path_to_input_video.mp4';
    const audioPath = 'path_to_input_audio.mp3';
    const outputPath = 'path_to_output_video.mp4';

    const command = `-i ${videoPath} -i ${audioPath} -c:v copy -c:a aac -strict experimental ${outputPath}`;

    try {
      await executeFFmpeg(command);
      console.log('Background music added successfully.');
    } catch (error) {
      console.error('Error adding background music:', error);
    }
  };

  return (
    <View>
      <Button title="Add Background Music" onPress={addBackgroundMusic} />
    </View>
  );
};

export default AddBackgroundMusicScreen;

    In the FFmpeg command:

    -i ${videoPath} specifies the input video file.

    -i ${audioPath} specifies the input audio file.

    -c:v copy copies the video stream without re-encoding.

    -c:a aac -strict experimental encodes the audio stream to AAC format.

    ${outputPath} specifies the output video file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search