Chapter 209: <Html5Audio>

Core Idea

previously called <Audio>

Key Concepts

• API
• src
• volume?
• loopVolumeCurveBehavior?<AvailableFrom v="4.0.142" />
• trimBefore? / trimAfter?<AvailableFrom v="4.0.319"/>
• startFrom? / endAt?
• playbackRate?<AvailableFrom v="2.2.0"/>
• preservePitch?<AvailableFrom v="4.0.463" />

Code Examples

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile('audio.mp3')} />
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for <Html5Audio> from the official docs.

Key Takeaways

1. Understand api when working with <Html5Audio>.
2. Understand src when working with <Html5Audio>.
3. Understand volume? when working with <Html5Audio>.
4. Understand loopvolumecurvebehavior?<availablefrom v="4.0.142" /> when working with <Html5Audio>.
5. Understand trimbefore? / trimafter?<availablefrom v="4.0.319"/> when working with <Html5Audio>.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.