跳到主要内容

<pc-sound-slot>

<pc-sound-slot> 声明父 <pc-sound> 的一个命名声音，包括资源、音量、音高、循环和自动播放。

用法
  • 必须直接位于 <pc-sound> 下。
  • name 在同一组件内必须唯一，同名已占用时不会添加。

属性​

属性类型默认值说明
asset资源 ID-必须引用 audio 资源
auto-playBoolean（布尔）"false"槽位创建后立即播放，实体或组件禁用时则等两者启用。浏览器需要用户交互才允许声音，因此实际在首次点击、触摸或鼠标按下后开始
durationNumber（数字）-秒制时长，省略播放完整片段
loopBoolean（布尔）"false"是否循环
nameString（字符串）-可通过 component.slot(name) 查询的名称
overlapBoolean（布尔）"false"已播放时再次播放是否新增重叠副本，否则重新开始
pitchNumber（数字）"1"音高倍率，1 为正常，与父组件 pitch 相乘
start-timeNumber（数字）"0"起始偏移秒数
volumeNumber（数字）"1"音量，0 到 1，与父组件 volume 相乘

示例​

两个槽位播放同一片段，第二个音高减半。浏览器需要手势，因此通过覆盖在应用上的 HTML 按钮启动，可修改 pitch 或 volume：

实时示例
<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 接口​

可以通过 SoundSlotElement API创建和操作元素。

各 attribute 均有对应 property。底层 SoundSlot 属于父组件，可通过 soundElement.component.slot(name) 或元素 soundSlot 取得，就绪前后者为 null。

另请参阅​

示例：基础声音、空间声音、下落方块和钟楼。