ef-audio

Set fft-size if you want to pair the element with ef-waveform for visualization.

The playback-rate and fade APIs below require Elements 0.60.34 or later.

Playback speed

Set playback-rate to a number from 0.25 to 4. The default is 1. Audio keeps its pitch during preview and export.

<ef-audio
  src="https://assets.editframe.com/muted-guitar.mp3"
  sourcein="2s"
  sourceout="10s"
  playback-rate="2"
></ef-audio>

This plays eight source seconds in four composition seconds. Trims use source time; see the time model for explicit duration behavior.

In JavaScript or React, use the numeric playbackRate property. Invalid HTML attribute values fall back to 1; setting the property outside the finite 0.25–4 range throws a RangeError.

Volume and fades

volume sets the clip's base gain from 0 to 1. For a fade, assign a volumeAtTime function in JavaScript or as a React prop. Its argument is clip-local composition seconds, not source-file seconds. The callback starts at 0 regardless of the source trim or the clip's offset in its parent.

<ef-timegroup id="music" duration="8s">
  <ef-audio
    src="https://assets.editframe.com/muted-guitar.mp3"
    duration="8s"
    volume="0.6"
  ></ef-audio>
</ef-timegroup>

<script type="module">
  const root = document.getElementById("music");
  root.initializer = (instance) => {
    const audio = instance.querySelector("ef-audio");
    audio.volumeAtTime = (localTime) => Math.min(localTime, 8 - localTime);
  };
</script>

This fades in over the first second and out over the last second. The callback returns a multiplier applied to volume: results are clamped to 0–1, with nonfinite results treated as 1. Export evaluates the fade for every output audio sample; preview smooths gain changes. Use a deterministic function of local time so seeking and export produce the same fade.

volumeAtTime is a property, not an HTML attribute. ef-video supports the same audio controls.