I have successfully implemented a method in my Three.js app for loading, playing, and analyzing audio that is compatible with both desktop and mobile devices. I must use THREE.Audio instead of HTML5 Audio Analyser, as the latter does not work on mobile devices. However, I am encountering two issues that I cannot seem to resolve:
- Getting the current time of the audio being played
- Setting an onEnded function
Below is the code I am using:
function soundLoad() {
listener = new THREE.AudioListener();
audio = new THREE.Audio( listener );
audioLoader = new THREE.AudioLoader();
analyser = new THREE.AudioAnalyser( audio, 32 );
audioLoader.load( 'audio/01.mp3', function( buffer ) {
audio.setBuffer( buffer );
audio.setLoop( false );
audio.setVolume( 1 );
(function readyToGo() {
console.log(audio.buffer.duration); // this works fine
document.getElementById('btnPlay').addEventListener( 'click', function(){
audio.play();
setInterval(function(){
console.log(audio.context.currentTime); // starts counting from the loading, not from the actual play
console.log(audio.buffer.currentTime); // does not work
}, 10);
}, false);
// audio.onEnded = function() { console.log(‘end’);};
// audio.buffer.onEnded = function() { console.log(‘end’);};
// audio.source.onEnded = function() { console.log(‘end’);}; // none of them work
})();
});}
I am hopeful that there is a solution to both of these issues without needing to rely on external libraries. Thank you for any help!