How to play audio in Three JS - audio

Question

I have some problems with Three.js audio and everything related.
How do you make an .mp3 file to play when you open the page in Three js? I haven't found any examples, any tutorial, any nothing, just nothing anywhere. I have following code:
var listener = new THREE.AudioListener();
camera.add( listener );
// create a global audio source
var sound = new THREE.Audio( listener );
var audioLoader = new THREE.AudioLoader();
//Load a sound and set it as the Audio object's buffer
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setLoop(true);
sound.setVolume(0.5);
sound.play();
});
How do I make it play?

Answer 1

Try this link https://codepen.io/EllenProbst/pen/RQQmJK, below I have removed most of the JavaScript code that was not necessary to make the audio play.
It works with m4a, but it should work for mp3 and ogg formats as well.
// Music by The War On Drugs - Thinking Of A Place
var camera, scene, renderer;
var stream = "https://cdn.rawgit.com/ellenprobst/web-audio-api-with-Threejs/57582104/lib/TheWarOnDrugs.m4a";
// init
function init() {
// scene
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x01131e, 0.025);
// camera
camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.set(0.1, -0.14, 0.8);
// renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("#01131E");
document.body.appendChild(renderer.domElement);
// AUDIO
var audioLoader = new THREE.AudioLoader();
var listener = new THREE.AudioListener();
var audio = new THREE.Audio(listener);
audioLoader.load(stream, function(buffer) {
audio.setBuffer(buffer);
audio.setLoop(true);
audio.play();
});
}
// animate
function animate() {
requestAnimationFrame(animate);
render();
}
// render
function render() {
renderer.render(scene, camera);
}
init();
animate();

Answer 2

You should include:
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log( 'Un error ha ocurrido' );
}
So your code will be:
var listener = new THREE.AudioListener();
camera.add( listener );
// create a global audio source
var sound = new THREE.Audio( listener );
var audioLoader = new THREE.AudioLoader();
//Load a sound and set it as the Audio object's buffer
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setLoop(true);
sound.setVolume(0.5);
sound.play();
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log( 'Un error ha ocurrido' );
}
);