How I can put footstep sound?

Questions
,
1

I have a SkinnedMesh character.
How can I add sound to his steps? In other words. I want to play a footstep sound every time the feet hits the ground.
Please note that the model can stand, then walk, run, jump etc…
What is the correct way to achieve this?

any tip will be appreciate :slightly_smiling_face:

2

First you need to download the sounds, then use the code below to place sound to your character.

// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add( listener );

// create a global audio source
const sound = new THREE.Audio( listener );

// load a sound and set it as the Audio object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/footsteps.wav', function( buffer ) {
	sound.setBuffer( buffer );
	sound.setLoop( true );
	sound.setVolume( 0.5 );
	sound.play();
});

See project

3

Hi Umbawa. thanks for answer.
I think I understand what you did. You start the audio depending on the animation and the audio is looping. I’m right?

I’m looking for something precise.
Something like this bouncing balls but applied to each foot of the character.

I have left leg sound fx and right leg sound fx.
The main reason I seek to do it this way. It is because the character has over 300 animations where the timing for the footsteps on the ground vary from animation to animation.

I think maybe the solution will be something like getting the foot bone position.Y and in some way calculate the distance between foot and ground.

1 Like
4

I suggest to use .wav/mp3 sounds instead to save browser memory.

5

You can play the audio clip based on a time or duration variable in de animation clip. I don’t have my laptop at hand, but I’m sure if you check out the docs and find the property you’re looking for, all you need to do is play an audio clip at the right time, depending on the animation clip that is currently playing.

1 Like
6

Thanks for answer Harold.

That’s what I’ve been doing so far. I think this is not the best way for my project; I have almost 400 animations. It would be very difficult to be calculating the time of each one. Besides the sound would not be synchronous if I did it this way.

7

Checking position.Y of foot in rendering loop.
If position.Y more then 0, then when it will be again 0, then sound

8

I just solved it. the logic I used is basically the same as you suggest

1.- First I created 2 invisible cubes and glued them to each foot bone.
2.- I added positional audio to these cubes and I added setLoop( false ) property
3.- I created 2 boolean variables (one for each foot)
– On rendering loop –

if(this.vars.cube[0].parent.position.y>=1.5){
  this.vars.right_foot_up=true;
}
if(this.vars.right_foot_up==true&&this.vars.cube[0].parent.position.y<=0.5){
  this.vars.right_foot_up=false;
  this.vars.cube[0].children[0].play();
}
//and the process is the same for the other foot
2 Likes