<pc-sound-slot>

The <pc-sound-slot> tag declares one named sound of its parent <pc-sound>: the audio asset it plays, with its volume, pitch, looping and auto-play.

Usage

It must be a direct child of a <pc-sound> component.
Its name must be unique within that <pc-sound>: a slot whose name is already taken is not added.

Attributes

Attribute	Type	Default	Description
`asset`	Asset ID	-	Audio asset ID (must reference an `audio` type asset)
`auto-play`	Boolean	`"false"`	Whether the sound plays as soon as the slot is created. Browsers keep audio off until the user interacts with the page, so an auto-played sound starts at the first click, tap or mouse press
`duration`	Number	-	Duration of the sound in seconds (omit to play the full clip)
`loop`	Boolean	`"false"`	Whether the sound loops
`name`	String	-	The slot's name, which `component.slot(name)` finds it by
`overlap`	Boolean	`"false"`	Whether playing the slot while it is already playing starts another copy alongside it. Otherwise, playing it again restarts it
`pitch`	Number	`"1"`	Pitch multiplier (1 = normal pitch), multiplied by the `<pc-sound>`'s `pitch`
`start-time`	Number	`"0"`	Start time offset in seconds
`volume`	Number	`"1"`	Volume, from 0 to 1, multiplied by the `<pc-sound>`'s `volume`

Example

Two slots playing the same clip — the second at half pitch. Browsers only allow audio after a user gesture, so playback is wired to plain HTML buttons overlaid on the app. Try editing the pitch or volume values:

Live Example

<pc-app>
    <pc-asset src="https://developer.playcanvas.com/assets/drop.mp3" id="drop"></pc-asset>
    <pc-scene>
        <pc-entity name="camera">
            <pc-camera clear-color="#1d1f2b"></pc-camera>
        </pc-entity>
        <pc-entity name="jukebox">
            <pc-sound positional="false">
                <pc-sound-slot name="drop" asset="drop"></pc-sound-slot>
                <pc-sound-slot name="drop-slow" asset="drop" pitch="0.5" volume="0.8"></pc-sound-slot>
            </pc-sound>
        </pc-entity>
    </pc-scene>
</pc-app>
<div class="controls">
    <button id="play">Play</button>
    <button id="play-slow">Play at half pitch</button>
</div>
<style>
    .controls {
        position: absolute;
        top: 12px;
        left: 12px;
        display: flex;
        gap: 8px;
    }
</style>
<script type="module">
    import { whenReady } from '@playcanvas/web-components';

    const sounds = await whenReady('pc-sound');
    document.getElementById('play').onclick = () => sounds.component.slot('drop').play();
    document.getElementById('play-slow').onclick = () => sounds.component.slot('drop-slow').play();
</script>

JavaScript Interface

You can programmatically create and manipulate <pc-sound-slot> elements using the SoundSlotElement API.

The attributes are mirrored as properties. The engine SoundSlot itself belongs to the parent component: soundElement.component.slot(name) returns it, and so does the element's soundSlot property, which is null until the element is ready.

Attributes​

Example​

JavaScript Interface​

See Also​

Attributes

Example

JavaScript Interface

See Also