⮌ back | Overview | Home

🔊 Make Swapping Sounds

The <SwapSound /> component can play a sound file during a view transition.

Contents

Why should I use this component?

That’s not something I can answer for you.

How Does it Work?

The sound file is played from the start of the Preparation phase and ends synchronously with the visual effect of the view transition. The sound is slightly muted while the new page is loading. During the visual effect of the transition, it is played at full volume. As soon as the visual effect ends, the sound fades out quickly, regardless of the original length of the sound in the file.

Usage

Install astro-vtbot in your project as an Astro integration with npx astro add astro-vtbot or as a node package with npm install astro-vtbot.

The recommended way is to place the <SwapSound /> component in your basic layout after the <ViewTransitions /> component.

MyLayout.astro
1
---
2
import { ViewTransitions } from 'astro:transitions';
3
import SwapSound from 'astro-vtbot/components/SwapSound.astro';
4
---
5
<html>
6
  <head>
7
    <ViewTransitions />
8
    <SwapSound src="/my-sound-file.mp3"/>
9
    ...
10
  </head>
11
  ...
12
</html>

Properties

The component has properties that you can use to target it on what elements to name and what name to use. You can also decided if you want to override existing view-transition-name or if elements that already have an view transition name should be ignored.

PropertyTypeEffect
srcstringThis is the sound file that should be played. Put the file into your public directory and precede the filename with a slash