0

I have several entities in a scene the are externally triggered to be visible. When they are visible and a user mouses over them (gaze-based, so when the user looks at the entity), audio should be played that is unique to each entity. When the user looks elsewhere, the audio should stop.

The problem I am experiencing is that the listener in my custom component appears to not know which entity is playing when more than one object is open simultaneously, and will stop/start the wrong audio. How do I ensure that the listener is for the correct entity?

Referencing this: Play sound on click in A-Frame

js: 

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

this.el.addEventListener('mouseenter', () => {
  var viz = this.el.getAttribute('material').visible;
  if (viz){
    if(!playing) {
      audio.playSound();
    } else {
      audio.stopSound();
    }
    playing = !playing;
  }

});
this.el.addEventListener('mouseleave', () => {
  audio.stopSound();
  playing = !playing;
})
}
})

example HTML: 

<a-sound  id="popup1" data-clickable play-audio autoplay="false" loop="false" volume="5"  visible="false" src="#audio1">
</a-sound>

<a-sound  id="popup2" data-clickable play-audio autoplay="false" loop="false" volume="5"  visible="false" src="#audio2">
</a-sound>
schatzkin
  • 319
  • 3
  • 17

1 Answers1

1

The bindings look right.

Is it because both sounds are getting intersected / looked at, at the same time? visibility doesn't toggle off the raycaster, I don't think. You can add / remove the data-clickable attribute.

ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • Strange -- when I remove data-clickable, it is somehow interpreted as a mouseleave. I have : audio.playSound() self.el.removeAttribute('data-clickable'); But when the data-clickable attribute code is executed, the processing drops out of the if statement the mouseleave code below is executed. – schatzkin Sep 17 '18 at 16:30
  • Yeah, that's expected. The element is no longer raycastable and thus no longer intersected so it's counted as a mouseleave. You can add a check to your mouseleave function so that it checks for data-clickable is still there before pausing. – ngokevin Sep 17 '18 at 23:05
  • Okay, thanks for pointing that out! I thought I would just add something like var canuClick = self.el.getAttribute('data-clickable'); but the var canuClick comes up empty even when the attribute exists. What am I missing? – schatzkin Sep 18 '18 at 18:19