Adjust Audio Playback Speed - SvelteKit

Control audio playback speed by adjusting the speed multiplier using CE.SDK’s timeline UI and programmatic speed adjustment API.

Audio Speed Adjustment example showing timeline with audio blocks at different speeds

8 mins

estimated time

Download

StackBlitz

GitHub

Playback speed adjustment changes how fast or slow audio plays without changing its pitch (though pitch shifting may occur depending on the audio processing implementation). A speed multiplier of 1.0 represents normal speed, values below 1.0 slow down playback, and values above 1.0 speed it up. This technique is commonly used for podcast speed controls, time-compressed narration, slow-motion audio effects, and accessibility features.

import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
import packageJson from './package.json';

/**
 * CE.SDK Plugin: Adjust Audio Speed Guide
 *
 * Demonstrates audio playback speed adjustment in CE.SDK:
 * - Loading audio files
 * - Adjusting playback speed with setPlaybackSpeed
 * - Three speed presets: slow-motion (0.5x), normal (1.0x), and maximum (3.0x)
 */
class Example implements EditorPlugin {
  name = packageJson.name;

  version = packageJson.version;

  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
    if (!cesdk) {
      throw new Error('CE.SDK instance is required for this plugin');
    }

    // Enable audio and video features in CE.SDK
    cesdk.feature.enable('ly.img.video');
    cesdk.feature.enable('ly.img.audio');
    cesdk.feature.enable('ly.img.timeline');
    cesdk.feature.enable('ly.img.playback');

    // Load assets and create a video scene (required for audio support)
    await cesdk.addDefaultAssetSources();
    await cesdk.addDemoAssetSources({
      sceneMode: 'Video',
      withUploadAssetSources: true
    });
    await cesdk.createVideoScene();

    const engine = cesdk.engine;
    const scene = engine.scene.get();
    const pages = engine.block.findByType('page');
    const page = pages.length > 0 ? pages[0] : scene;

    // Use a sample audio file
    const audioUri =
      'https://cdn.img.ly/assets/demo/v2/ly.img.audio/audios/dance_harder.m4a';

    // Create an audio block and load the audio file
    const audioBlock = engine.block.create('audio');
    engine.block.setString(audioBlock, 'audio/fileURI', audioUri);

    // Wait for audio resource to load
    await engine.block.forceLoadAVResource(audioBlock);

    // Slow Motion Audio (0.5x - half speed)
    const slowAudioBlock = engine.block.duplicate(audioBlock);
    engine.block.appendChild(page, slowAudioBlock);
    engine.block.setPositionX(slowAudioBlock, 100);
    engine.block.setPositionY(slowAudioBlock, 200);
    engine.block.setPlaybackSpeed(slowAudioBlock, 0.5);

    // Normal Speed Audio (1.0x)
    const normalAudioBlock = engine.block.duplicate(audioBlock);
    engine.block.appendChild(page, normalAudioBlock);
    engine.block.setPositionX(normalAudioBlock, 100);
    engine.block.setPositionY(normalAudioBlock, 400);
    engine.block.setPlaybackSpeed(normalAudioBlock, 1.0);

    // Maximum Speed Audio (3.0x - triple speed)
    const maxSpeedAudioBlock = engine.block.duplicate(audioBlock);
    engine.block.appendChild(page, maxSpeedAudioBlock);
    engine.block.setPositionX(maxSpeedAudioBlock, 100);
    engine.block.setPositionY(maxSpeedAudioBlock, 600);
    engine.block.setPlaybackSpeed(maxSpeedAudioBlock, 3.0);

    // Log duration changes for demonstration
    const slowDuration = engine.block.getDuration(slowAudioBlock);
    const normalDuration = engine.block.getDuration(normalAudioBlock);
    const maxDuration = engine.block.getDuration(maxSpeedAudioBlock);

    console.log(`Slow motion (0.5x) duration: ${slowDuration.toFixed(2)}s`);
    console.log(`Normal speed (1.0x) duration: ${normalDuration.toFixed(2)}s`);
    console.log(`Maximum speed (3.0x) duration: ${maxDuration.toFixed(2)}s`);

    // Remove the original audio block (we only need the duplicates)
    engine.block.destroy(audioBlock);

    // Zoom to fit all audio blocks and labels
    engine.scene.zoomToBlock(page, 40, 40, 40, 40);
  }
}

export default Example;

This guide covers how to adjust audio playback speed programmatically using the Engine API, understand speed constraints, and manage how speed changes affect timeline duration.

Understanding Speed Concepts#

CE.SDK supports playback speeds from 0.25x (quarter speed) to 3.0x (triple speed), with 1.0x as the default normal speed. Values below 1.0 slow down playback, values above 1.0 speed it up.

Speed and Duration: Adjusting speed automatically changes the block’s timeline duration following an inverse relationship: perceived_duration = original_duration / speed_multiplier. A 10-second clip at 2.0x speed plays in 5 seconds; at 0.5x speed it takes 20 seconds. This automatic adjustment maintains timeline synchronization when coordinating audio with other elements.

Common use cases: Podcast playback controls (1.5x-2.0x), accessibility features (0.75x for easier comprehension), time-compressed narration, dramatic slow-motion effects (0.25x-0.5x), transcription work, and music tempo adjustments.

Setting Up Audio for Speed Adjustment#

Loading Audio Files#

We create an audio block and load an audio file by setting its fileURI property.

// Create an audio block and load the audio file
const audioBlock = engine.block.create('audio');
engine.block.setString(audioBlock, 'audio/fileURI', audioUri);

// Wait for audio resource to load
await engine.block.forceLoadAVResource(audioBlock);

Unlike video or image blocks which use fills, audio blocks store the file URI directly on the block itself using the audio/fileURI property. The forceLoadAVResource call ensures CE.SDK has downloaded the audio file and loaded its metadata, which is essential for accurate duration information and playback speed control.

Adjusting Playback Speed#

Setting Normal Speed#

By default, audio plays at normal speed (1.0x). We can explicitly set this to ensure consistent baseline behavior.

// Normal Speed Audio (1.0x)
const normalAudioBlock = engine.block.duplicate(audioBlock);
engine.block.appendChild(page, normalAudioBlock);
engine.block.setPositionX(normalAudioBlock, 100);
engine.block.setPositionY(normalAudioBlock, 400);
engine.block.setPlaybackSpeed(normalAudioBlock, 1.0);

Setting speed to 1.0 ensures the audio plays at its original recorded rate. This is useful after experimenting with different speeds and wanting to return to normal, or when initializing audio blocks programmatically to ensure consistent starting states.

Querying Current Speed#

We can check the current playback speed at any time using getPlaybackSpeed.

// Normal Speed Audio (1.0x)
const normalAudioBlock = engine.block.duplicate(audioBlock);
engine.block.appendChild(page, normalAudioBlock);
engine.block.setPositionX(normalAudioBlock, 100);
engine.block.setPositionY(normalAudioBlock, 400);
engine.block.setPlaybackSpeed(normalAudioBlock, 1.0);

This returns the current speed multiplier as a number. Use this to populate UI controls, validate that speed changes were applied, or make relative adjustments based on existing speeds.

Common Speed Presets#

Slow Motion Audio (0.5x)#

Slowing audio to half speed creates a slow-motion effect that’s useful for careful listening or transcription.

// Slow Motion Audio (0.5x - half speed)
const slowAudioBlock = engine.block.duplicate(audioBlock);
engine.block.appendChild(page, slowAudioBlock);
engine.block.setPositionX(slowAudioBlock, 100);
engine.block.setPositionY(slowAudioBlock, 200);
engine.block.setPlaybackSpeed(slowAudioBlock, 0.5);

At 0.5x speed, a 10-second audio clip will take 20 seconds to play. This slower pace makes it easier to catch details, transcribe speech accurately, or create dramatic slow-motion audio effects in creative projects.

Maximum Speed (3.0x)#

The maximum supported speed is 3.0x, three times normal playback rate.

// Maximum Speed Audio (3.0x - triple speed)
const maxSpeedAudioBlock = engine.block.duplicate(audioBlock);
engine.block.appendChild(page, maxSpeedAudioBlock);
engine.block.setPositionX(maxSpeedAudioBlock, 100);
engine.block.setPositionY(maxSpeedAudioBlock, 600);
engine.block.setPlaybackSpeed(maxSpeedAudioBlock, 3.0);

At maximum speed, audio plays very quickly—a 10-second clip finishes in just 3.33 seconds. This extreme speed is useful for rapidly skimming through content to find specific moments, though comprehension becomes challenging at this rate.

Speed and Timeline Duration#

Understanding Duration Changes#

When we change playback speed, CE.SDK automatically adjusts the block’s timeline duration to reflect the new playback time.

// Log duration changes for demonstration
const slowDuration = engine.block.getDuration(slowAudioBlock);
const normalDuration = engine.block.getDuration(normalAudioBlock);
const maxDuration = engine.block.getDuration(maxSpeedAudioBlock);

console.log(`Slow motion (0.5x) duration: ${slowDuration.toFixed(2)}s`);
console.log(`Normal speed (1.0x) duration: ${normalDuration.toFixed(2)}s`);
console.log(`Maximum speed (3.0x) duration: ${maxDuration.toFixed(2)}s`);

The original duration represents how long the audio takes to play at normal speed. When we double the speed to 2.0x, the duration is automatically halved. The audio content is the same, but it plays through in half the time, so the timeline block shrinks accordingly.

This automatic adjustment keeps your timeline synchronized. If you have multiple audio tracks or need to coordinate audio with video, the timeline will accurately reflect the new playback duration after speed changes.