THREE.PositionalAudio and HTMLAudioElement

Questions
, ,
1

Hi everyone!

What is different between THREE.PositionalAudio and HTMLAudioElement?

I am working on a web app which has 3D model. Users are able to click on model and play clickSound.

What’s different between THREE.PositionalAudio:

let soundListener = new THREE.AudioListener();
audioLoader = new THREE.AudioLoader();
let clickSound = new THREE.PositionalAudio(soundListener);
audioLoader.load( 'assets/audio/click.mp3', function ( buffer ) {
clickSound.setBuffer(buffer);
clickSound.setRefDistance(20);
clickSound.setLoop(false);
clickSound.setVolume(10);
clickSound.play();
});

and HTMLAudioElement:

let clickSound = new Audio('assets/audio/click.mp3');
clickSound.play().then(() => {});

Thanks,

2

THREE.Audio and THREE.PositionalAudio are based on the Web Audio API which has significant advantages over ordinary HTML 5 audio elements. I suggest you google this topic since there are many existing resources with comparison.

In general, for UI sound effects you want to use THREE.Audio (since spatialization is not required).

3

Is there any way to make a THREE.PositionalAudio object skip to a given play position (i.e. 5 seconds in.)

Trying to do this:

console.log(music) // Three.PositionalAudio object
music.context.currentTime = 5

Throws an error saying that currentTime is read-only.

4

Ah, found the solution here: https://threejs.org/docs/#api/en/audio/Audio
I’ve used the offset property that THREE.PositionalAudio inherits from the THREE.Audio prototype.

console.log(music); // Three.PositionalAudio object
music.offset = 5;
music.play() // Starts playing 5 seconds in