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 AudioCanvasAction.delete is enabled. However, in our example, we also enable the option to play and pause the audio clip (AudioCanvasAction.playPause).


import 'package:catalog/models/code_example.dart';
import 'package:imgly_sdk/imgly_sdk.dart';
import 'package:video_editor_sdk/video_editor_sdk.dart';

class VideoAudioConfigurationExample extends CodeExample {
  @override
  void invoke() async {
    // Add a video from the assets directory.
    final video = Video("assets/Skater.mp4");

    // Create [AudioOptions] to customize the audio tool.
    final audioOptions = AudioOptions(
        categories: [
          AudioClipCategory("custom", "Custom",
              items: [AudioClip("elsewhere", "assets/elsewhere.mp3")])
        ],
        canvasActions: [
          AudioCanvasAction.delete,
          AudioCanvasAction.playPause
        ]
        );

    // Create a [Configuration] instance.
    final configuration = Configuration(audio: audioOptions);

    try {
      // Open the video editor and handle the export as well as any occurring errors.
      final result =
          await VESDK.openEditor(video, configuration: configuration);

      if (result != null) {
        // The user exported a new video successfully and the newly generated video is located at `result.video`.
        print(result.video);
      } else {
        // The user tapped on the cancel button within the editor.
        return;
      }
    } catch (error) {
      // There was an error generating the video.
      print(error);
    }
  }
}

Configure Audio Overlays

categories#

canvasActions#

`categories`#

`canvasActions`#