From Remote URL

VideoEditor SDK supports loading audio files from a remote URL, this can be a resource hosted by a hosting provider or your own servers.

Download remote resource#

For each audio clip, we construct a remote URL from the clip identifier and create a download promise using the expo-file-system module. Upon successful download, we save it to a temporary location.

Create Audio Clips#

Once the audio files have been downloaded, we iterate over them and create valid AudioClip objects. Each of the clips needs an identifier as well as an audioURI. Optionally, you can also add a duration, a thumbnailURI, an artist and a title. If these are not specified, the SDK tries to fetch the relevant information from the clip's metadata.

Add to Configuration#

The previously created AudioClips can now be added to custom AudioClipCategory objects that are passed to the Configuration. Each category needs an identifier, a name, an optional thumbnailURI and optional items - an array of AudioClips.

Handle user interaction#

For this example, we are using Recoil and Recoil Nexus state management to disable user interaction while the download task is executing. In production, you might want to indicate download progress here. When the download has finished, we can reenable user interaction and dismiss the progress indicator.


import { AudioClip, Configuration, VESDK } from "react-native-videoeditorsdk";
import * as FileSystem from "expo-file-system";
import { setRecoil } from "recoil-nexus";
import { interactionState } from "../../../../state/interactionState";

export const videoAudioRemoteURLExample = async (): Promise<void> => {
  // Add a video from the assets directory.
  const video = require("../../../../../assets/vesdk/Skater.mp4");

  // Identifiers of the audio clips.
  const audioIdentifiers = [
    "elsewhere",
    "trapped_in_the_upside_down",
    "dance_harder",
    "far_from_home",
  ];

  // Download promises of remote assets.
  var promises: Promise<FileSystem.FileSystemDownloadResult>[] = [];

  audioIdentifiers.forEach((identifier) => {
    const remoteURL = `https://img.ly/static/example-assets/${identifier}.mp3`;
    const downloadPromise = FileSystem.downloadAsync(
      remoteURL,
      FileSystem.cacheDirectory + identifier + ".mp3"
    );
    promises.push(downloadPromise);
  });

  // Disable user interaction while the download is active. In production you would
  // want to show a progress indicator for example.
  setRecoil(interactionState, false);

  try {
    // Download the remote resources.
    const downloads = await Promise.all(promises);

    // The processed `AudioClip`s.
    var audioClips: AudioClip[] = [];

    // Process the downloaded audio clips.
    downloads.forEach((download, index) => {
      const uri = download.uri;
      const identifier = audioIdentifiers[index];

      const audioClip: AudioClip = {
        identifier: identifier,
        audioURI: uri,
      };

      audioClips.push(audioClip);
    });

    // Create a `Configuration` object.
    const configuration: Configuration = {
      audio: {
        categories: [
          {
            identifier: "elsewhere",
            name: "Elsewhere",
            items: audioClips.slice(0, 2),
          },
          {
            identifier: "other",
            name: "Other",
            items: audioClips.slice(2),
          },
        ],
      },
    };

    // Open the video editor and handle the export as well as any occuring errors.
    const result = await VESDK.openEditor(video, configuration);

    if (result != null) {
      // The user exported a new video successfully and the newly generated video is located at `result.video`.
      console.log(result?.video);
    } else {
      // The user tapped on the cancel button within the editor.
      return;
    }
  } catch (error) {
    // There was an error generating the video.
    console.log(error);
  } finally {
    // Reenable user interaction. In production you would want to dismiss a
    // progress indicator for example.
    setRecoil(interactionState, true);
  }
};