Question

我已经审查了此问题和解决方案，并正在使用提供的JS： A-Frame - playing / pausing sound with a custom ('a-sound') source。

我正在尝试构造一个弹出窗口，该弹出窗口既显示文字又显示叙述。我想要一个停止音频按钮，以便用户可以随意停止旁白。如果我使用<a-sound>，则似乎无法访问/创建子元素。如果我使用<a-entity>，则会收到错误消息：

“未捕获的TypeError：无法读取未定义的属性'playSound'”。

这是元素：

  <a-entity  id="wrapper" position="0 0.5 1">
  <a-entity narration id="sound" mixin="alpr" sound="src: #piano; autoplay: false; loop: false; volume: 10;">
    <a-text id="close" mixin="close">
    </a-text>
    <a-text stopsound id="stop" mixin="stop-sound">
    </a-text>
</a-entity>

这是JS：

AFRAME.registerComponent('narration', {
init:function() {
    let playing = false;
    let audio = this.el.components.sound;

    this.el.addEventListener('click', () => {
        if(!playing) {
            audio.playSound();
        } else {
            audio.stopSound();
        }
        playing = !playing;
    });
    this.el.addEventListener('mouseleave', () => {
        audio.stopSound();
    })
    var stopaudio = document.querySelector('#stop');
    stopaudio.addEventListener('click', () => {
        audio.stopSound();
    })
    var closeaudio = document.querySelector('#close');
    stopaudio.addEventListener('click', () => {
        audio.stopSound();
    })
}
})

请让我知道我所缺少的。谢谢！

Answer 1

声音组件尚未初始化。以described in the docs的形式向您的narration组件依赖项添加声音：

AFRAME.registerComponent(‘narration’,{
 dependencies: [‘sound’],
 ...
}

使用一个元素在另一个元素上暂停声音

1 个答案: