Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Language:

Configure Audio Overlays

VideoEditor SDK supports several configuration options for the audio tool allowing flexible adaptation to different needs and use cases. For a detailed explanation of how to configure different editor views, refer to this guide.

categories#

In order to showcase the audio tool, we need to add custom audio clips. Therefore, we first load them from the bundle and add them in an array to the configuration.audio.categories configuration option. For details consult the section on adding audio overlays from the app bundle.

canvasActions#

Configuring the audio tool allows changing the way users can overlay clips on a video. The actions users can perform are configured via the canvasACtions property. By default, only the CanvasAction.DELETE is enabled. However, in our example, we also enable the option to play and pause the audio clip (CanvasAction.PLAY_PAUSE).

File:
import {
  CanvasAction,
  Configuration,
  VESDK,
} from "react-native-videoeditorsdk";


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


  // Create a `Configuration` object.
  const configuration: Configuration = {
    audio: {
      // In order to showcase the tool, we need to add some audio clips for
      // the audio tool.
      categories: [
        {
          identifier: "custom",
          name: "Custom",
          items: [
            {
              identifier: "elsewhere",
              audioURI: require("../../../assets/vesdk/elsewhere.mp3"),
            },
          ],
        },
      ],
      // By default, the editor only allows the `CanvasAction.DELETE`.
      // For this example, the user should also be able to play and
      // pause the audio.
      canvasActions: [CanvasAction.DELETE, CanvasAction.PLAY_PAUSE],
    },
  };


  try {
    // 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);
  }
};