HTML Audio API in Three.js: not working on mobile browsers?

Hi everyone,

I am working on a test project in my codepen,, for the Audio API.

The test works fine in desktop (Chrome, Firefox), but not for those same browsers in mobile (Android).

Following some additional references I already implemented the required user interaction to start the API. The action was required for Chrome desktop to be successful, but not required for Firefox desktop.

Interestingly, my log message reads that the audio resumed successfully in whether mobile or desktop, only that I can’t hear anything when opening in my mobile.

For those not involved in Three.js, the Audio API standard code flow is reduced to several methods in Three.js. Probably you might want to check these lines in my codepen project:

var listener = new THREE.AudioListener();
 var audioLoader = new THREE.AudioLoader();


var sound1 = new THREE.PositionalAudio( listener );
 audioLoader.load( '', function( buffer ) {
     //document.getElementById('overlay').innerHTML = buffer.length + ' bits loaded';
     sound1.setBuffer( buffer );
					sound1.setRefDistance( 100 ); //the smaller, the less;
     } else {
      document.getElementById('overlay').innerHTML = "NO MUSIC LOADED"
    function(xhr){console.log( (xhr.loaded / * 100) + '% loaded' );}, //success callback
    function(err){console.log( 'An error happened' ); document.getElementById('overlay').innerHTML = 'An error happened loading music'; }  


 $(document).on('click touch', function() {
 sound1.context.resume().then(() => {
    console.log('Playback resumed successfully');
   document.getElementById('overlay').innerHTML =  'Playback resumed successfully';
  }).catch((err)=>{document.getElementById('overlay').innerHTML = err; });

Any advise will be welcome.

It was

sound1.setRefDistance( 100 );

It was still too low (:scream:). I set it to 2000 and now it is ok.