Use one element to pause sound on another - aframe

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’],
...
}