Use one element to pause sound on another

Question

I've reviewed this question and the solutions and am using the JS provided: A-Frame - playing / pausing sound with a custom ('a-sound') source.

I'm trying to construct a popup that has text displayed but also a narration. I want to have a stop audio button so the user can stop the narration at will. If I use <a-sound>, I don't seem to be able to access/create child elements. If I use <a-entity> I get an error:

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

This is the element:

  <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>

This is the 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();
    })
}
})

Please let me know what I'm missing. Thanks!

Answer 1

The sound component is not yet initialized. Add sound to your narration component dependencies as described in the docs:

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