Education For All

A-Frame: How to trigger audio and skybox image/video sphere at the same time by clicking?

PatricKevin

Likes 0

Problem Description

Hi,

The A-Frame tutorials took me here. I’ve been trying to modify this component so it can play a different audio each time I change the skybox picture through clicking. Any suggestions how that could be done?

AFRAME.registerComponent('set-sky', {
schema: {default:''},
multiple: true
 init() {
  const sky = document.querySelector('a-sky');
  this.el.addEventListener('click', () => {
  sky.setAttribute('src', this.data);
  });
 }
});

Also, is there any chance I might be able to use both images and video spheres in a component like this? Thanks!

<html>
 <head>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script src="https://rawgit.com/aframevr/aframe/2baa063/dist/aframe-master.min.js"></script>
  <meta charset="UTF-8">

  <script>
   AFRAME.registerComponent('set-sky', {
    schema: {default:''},
     init() {
      const sky = document.querySelector('a-sky');
      this.el.addEventListener('click', () => {
      sky.setAttribute('src', this.data);
      });
     }
    });
  </script>
 </head>

 <body>
  <a-scene>
   <a-assets>
<audio id="opening" src="Lake Ambience.mp3"></audio>
    <audio id="1" src="Game.wav"></audio>
    <audio id="2" src="Explosion.wav"></audio>
    <audio id="3" src="Laser.wav"></audio>
    <audio id="4" src="Spooky.mp3"></audio>
    <video id="video" src="Video.MP4"></video>
   </a-assets>

    <!-- Sounds -->
   <a-entity sound="autoplay: true; loop: true; src: #opening;"></a-entity>

   <a-camera position="0 2 0">
    <a-cursor color="#5DADE2" fuse="true" timeout="10"></a-cursor>
   </a-camera>

   <a-sphere color="#2C3E50" radius="0.5" position="0 -5 -15" set-sky="1.jpg"></a-sphere>
   <a-sphere color="red" radius="0.5" position="-15 -5 0" set-sky="2.jpg"></a-sphere>
   <a-sphere color="blue" radius="0.5" position="15 -5 0" set-sky="3.jpg"></a-sphere>
   <a-sphere color="white" radius="0.5" position="0 -5 15" set-sky="4.jpg"></a-sphere>

   <a-sky></a-sky>
  </a-scene>
 </body>
</html>

This is what I have right now, and I'm trying to add sound to each of the sphere click event, while changing "4.jpg" to a 360 video in the last event.

Sonar Systems admin

Likes 0

So you want random audio playback?

This reply has been verified.

PatricKevin

Likes 0

Hi thanks for replying! What I wanted was to have a different audio playback for each sphere when I click on them, just like how the skybox pictures are linked to the clicking events. Does that make sense?

PatricKevin

Likes 0
Also I’m trying to figure out a code that would allow me to link one of the spheres to a 360 video instead of the skybox image. Any suggestions?

Like:
```
   <a-sphere color="#2C3E50" radius="0.5" position="0 -5 -15" set-sky="1.jpg"></a-sphere>
   <a-sphere color="red" radius="0.5" position="-15 -5 0" set-sky="2.jpg"></a-sphere>
   <a-sphere color="blue" radius="0.5" position="15 -5 0" set-sky="3.jpg"></a-sphere>
   <a-sphere color="white" radius="0.5" position="0 -5 15" "click to open a video file"></a-sphere>
```

Sonar Systems admin

Likes 0

Lets do the audio click first. Do you have click detection on the spheres?

Henryjames

Likes 0

To adjust the playback audio my suggestion is to use Alight Motion Mod APK. It is one of the most powerful mods for editing songs. And the amazing thing about this mod is that you can use its all premium features for free.