25 Dec 2020

Three.js Positional Audio | Demo | How To Use?

three.js positional audio
three.js positional audio
In this post, we will know that How can you use threejs's PositionalAudio🔊 to your project.

PositionalAudio : PositionalAudio system provide a real world audio experiences to your users/listeners. Farthest distance having low audio, while nearest distance have high audio.


How to implement PositionAudio in Threejs Project?

Implementing PositionalAudio into threejs project is too easy stuff. Please Follow the flows of codes that has been given bellow.

  1. THREE.AudioListener object is used for any audio output.
    const listener = new THREE.AudioListener();
camera.add( listener );

const sound = new THREE.PositionalAudio( listener );

const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/song.ogg', function( buffer ) {
	sound.setBuffer( buffer );
	sound.setRefDistance( 20 );

// implementing sound to mesh

Live Rendering:

Play with CodeBits

Pinch screen to zoom-out and zoom-in to feel threejs positional audio effect.