Play audio without sound

Questions
1

This is my code

this.audioLoader.load('./sounds/shoot.mp3', (buffer) => {
      this.audio = new THREE.Audio(this.listener);
      this.audio.setBuffer(buffer);
      this.audio.setVolume(0.5)
      this.audio.play()
      
      this.scene.add(this.audio);
})

How can I control the playback and stop of audio？

The console has the following warnings

image
image1003×530 13.9 KB

2

this.audio.pause();
this.audio.stop();

or

this.audio.setLoop( false ); if you want to play it once

oh and you will need to trigger the sound on a user gesture like a click/mouse down or up for example

document.addEventListener(“click”, function(){
this.audioLoader.load(‘./sounds/shoot.mp3’, (buffer) => {
this.audio = new THREE.Audio(this.listener);
this.audio.setBuffer(buffer);
this.audio.setVolume(0.5)
this.audio.play()

  this.scene.add(this.audio);

});
});

3

I set up looping, but there is still no sound. There is no sound when refreshing the page.

5

try this and click anywhere on the page:

document.addEventListener(“click”, function(){
this.audioLoader.load(’./sounds/shoot.mp3’, (buffer) => {
this.audio = new THREE.Audio(this.listener);
this.audio.setBuffer(buffer);
this.audio.setVolume(0.5)
this.audio.play()

  this.scene.add(this.audio);

});
});

chrome sadly stopped “autoplay” of sound sometime ago so sounds now need to be activated by a click or something like that

6 
this.audioLoader.load('./sounds/shoot.mp3', (buffer) => {
      this.audio = new THREE.Audio(this.listener);
      this.audio.setBuffer(buffer);
      this.audio.setVolume(0.5)
      
      this.scene.add(this.audio);
})

this.shootmixer.addEventListener('loop', () => {
          this.audio.play()
})

Can I trigger it like this

7

Must use click event to play audio

8

You need the user to interact with the page before any sound will play, think along the lines of a prompt button

here’s something to read so you understand a little more:

9

My scene is playing audio in a certain interval of the animation. If so, is there any solution? There is no interaction during animation playback. :sob:

10

you’re going to need a sound prompt at the start of the page before anything else so like a splash screen saying SOUND ON or OFF when a person clicks ON then run the rest of your code as intended

you can even play a “blank” audio clip and set the volume to 0 and then play your main sounds when you need them the trick is to play 1 audio clip at the start and then the rest will play

basically you need the user to interact with the sound on button and that should be the first thing they do on the page if that makes sense

11

OK, thank you very much for your reply.

12

If I want to remove this audio, what should I do.

13

do you mean just stop it or completely remove it?

14

When I jump to the page, it is not destroyed. How should I destroy it.

15

It may be a bit rude to point you away from three - but in practice three audio system is quite simplistic and barebones. For production-ready apps consider using something like Howler.js - since it’s 100% focused on audio (the same way as three is on 3D), the sound control API there is a bit cleaner.

Additionally - it will handle audio-unlocking for you whenever it’s necessary (with three you’d need to write this handler manually.)

(The only reason I’d see not to use Howler is if you need spatial 3D - since then you’d need to connect three’s 3D world with howler’s 3D audio.)

2 Likes
16

Just FYI, you can also use a keypress to start and stop your animation.
I’ve been using the “S” key to start and stop my sounds.

1 Like
17

Thank you for your reply. I finally played the audio by clicking.

18

Thank you for your reply.