Play sound on click in A-Frame

Question

So I'm struggling to find a solution to play/stop/pause sound on "click" i.e. when focusing with a black dot with A-Frame sound entity... What I would like to have is a plain, shape or whatever with a play/pause image on it, which would trigger audio when focused. Did anyone encounter something similar perhaps?

<audio id="sound" crossorigin="anonymous" preload="auto" src="some-audio-file.mp3"></audio>

... would trigger something like sound="on: click; src: #sound"

Answer 1

try making a custom component

AFRAME.registerComponent('audiohandler', {
  init:function() {
     let playing = false;
     let audio = document.querySelector("#audio");
     this.el.addEventListener('click', () => {
          if(!playing) {
              audio.play();
           } else {
              audio.pause();
              audio.currentTime = 0;
           }
           playing = !playing;
     });
  }
})

and use it within Your 'button"

<a-box audiohandler> </a-box>

You can check all media methods, properties etc here.
You can check this button here.