使用一个元素暂停另一个元素的声音

Question

我已经查看了这个问题和解决方案，并且正在使用提供的 JS： .

我正在尝试构建一个既显示文本又显示旁白的弹出窗口。我想要一个停止音频按钮，以便用户可以随意停止旁白。如果我使用 <a-sound>，我似乎无法 access/create 子元素。如果我使用 <a-entity> 我会得到一个错误：

"Uncaught TypeError: Cannot read property 'playSound' of undefined".

这是元素：

  <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

声音组件尚未初始化。将声音添加到 narration 组件依赖项，如 described in the docs:

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

使用一个元素暂停另一个元素的声音

Use one element to pause sound on another

aframe