How add sound in 3d model?

🧑‍💻 Technical Support
1

Such a problem, I want to add sound to my 3D model. But no matter how much I try, nothing works, what should I do?





2






3

If you’re using Niantic Studio, simply add an audio component to any object and drag your audio file into the project’s “Files” section.

4

no, you don’t understand, I have an image target, and I want the music to work when the 3D scene is loaded onto the marker, i.e. music must be tied to the 3D scene

5

No worries, here are the steps to getting audio to play when an image target is found.

  1. Upload your music or found file to the asset manager in the project.

    Screenshot 2024-10-18 at 9.46.48 AM
    Screenshot 2024-10-18 at 9.46.48 AM1026×343 15.6 KB

  2. Create a custom component in your app.js

AFRAME.registerComponent('play-sound-on-image-found', {
  init() {
    const soundEntity = document.querySelector('#soundEntity')

    this.el.sceneEl.addEventListener('xrimagefound', () => {
      soundEntity.components.sound.playSound()
      console.log('Found it!')
    })

    this.el.sceneEl.addEventListener('xrimagelost', () => {
      soundEntity.components.sound.stopSound()
      console.log('Lost it :(')
    })
  },
})
  1. Register your audio in the A-Frame assets tag
<audio id="foundSound" src="assets/Night_at_the_Beach.mp3"></audio>
  1. Create the entity that will actually contain the sound
  <a-entity
    id="soundEntity"
    position="0 1.6 -3"
    sound="src: #foundSound; positional: false"></a-entity>
  1. Add the component to one of your “xr-named-image-target” entities. Here’s an example:
  <xrextras-named-image-target name="model-target" play-sound-on-image-found>
    <a-entity xrextras-one-finger-rotate gltf-model="#jelly-glb"></a-entity>
  </xrextras-named-image-target>

You probably want to set ‘positional’ to true and make sure the audio container entity is at the same position as your target.