Merge pull request #8370 from EvilPeanut/audio-dev

Add THREE.AudioLoader

Merge pull request #8370 from EvilPeanut/audio-dev
Add THREE.AudioLoader
6cd221e0 · Mr.doob · e222d48a · c24a17b5 · 6cd221e0 · 6cd221e0
7 changed file
--- a/docs/api/loaders/AudioLoader.html
+++ b/docs/api/loaders/AudioLoader.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>[name]</h1>
+
+		<div class="desc">Class for loading an [page:String AudioBuffer].</div>
+
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [page:String context], [page:LoadingManager manager] )</h3>
+		<div>
+		[page:String context] — The [page:String AudioContext] for the loader to use. Default is [page:String window.AudioContext].<br />
+		[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
+		</div>
+		<div>
+		Creates a new [name].
+		</div>
+
+
+		<h2>Methods</h2>
+
+		<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
+		<div>
+		[page:String url] — required<br />
+		[page:Function onLoad] — Will be called when load completes. The argument will be the loaded text response.<br />
+		[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
+		[page:Function onError] — Will be called when load errors.<br />
+		</div>
+		<div>
+		Begin loading from url and pass the loaded [page:String AudioBuffer] to onLoad.
+		</div>
+
+
+
+		<h2>Example</h2>
+
+		<code>
+		// instantiate a listener
+		var audioListener = new THREE.AudioListener();
+
+		// add the listener to the camera
+		camera.add( audioListener );
+
+		// instantiate audio object
+		var oceanAmbientSound = new THREE.Audio( audioListener );
+
+		// add the audio object to the scene
+		scene.add( oceanAmbientSound );
+
+		// instantiate a loader
+		var loader = new THREE.AudioLoader();
+
+		// load a resource
+		loader.load(
+			// resource URL
+			'audio/ambient_ocean.ogg',
+			// Function when resource is loaded
+			function ( audioBuffer ) {
+				// set the audio object buffer to the loaded object
+				oceanAmbientSound.setBuffer( audioBuffer );
+
+				// play the audio
+				oceanAmbientSound.play();
+			},
+			// Function called when download progresses
+			function ( xhr ) {
+				console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
+			},
+			// Function called when download errors
+			function ( xhr ) {
+				console.log( 'An error happened' );
+			}
+		);
+		</code>
+
+
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>
--- a/docs/list.js
+++ b/docs/list.js
@@ -45,6 +45,7 @@ var list = {


 		"Loaders": [
+			[ "AudioLoader", "api/loaders/AudioLoader" ],
 			[ "BabylonLoader", "api/loaders/BabylonLoader" ],
 			[ "BufferGeometryLoader", "api/loaders/BufferGeometryLoader" ],
 			[ "Cache", "api/loaders/Cache" ],

--- a/examples/misc_sound.html
+++ b/examples/misc_sound.html
@@ -78,6 +78,8 @@
 				var listener = new THREE.AudioListener();
 				camera.add( listener );

+				var audioLoader = new THREE.AudioLoader(listener.context);
+

 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0025 );
@@ -99,9 +101,11 @@
 				scene.add( mesh1 );

 				var sound1 = new THREE.PositionalAudio( listener );
-				sound1.load( 'sounds/358232_j_s_song.ogg' );
-				sound1.setRefDistance( 20 );
-				sound1.autoplay = true;
+				audioLoader.load( 'sounds/358232_j_s_song.ogg', function( buffer ) {
+					sound1.setBuffer( buffer );
+					sound1.setRefDistance( 20 );
+					sound1.play();
+				});
 				mesh1.add( sound1 );

 				//
@@ -111,9 +115,11 @@
 				scene.add( mesh2 );

 				var sound2 = new THREE.PositionalAudio( listener );
-				sound2.load( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg' );
-				sound2.setRefDistance( 20 );
-				sound2.autoplay = true;
+				audioLoader.load( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg', function( buffer ) {
+					sound2.setBuffer( buffer );
+					sound2.setRefDistance( 20 );
+					sound2.play();
+				});
 				mesh2.add( sound2 );

 				//
@@ -142,10 +148,12 @@
 				// global ambient audio

 				var sound4 = new THREE.Audio( listener );
-				sound4.load( 'sounds/Project_Utopia.ogg' );
-				sound4.autoplay = true;
-				sound4.setLoop(true);
-				sound4.setVolume(0.5);
+				audioLoader.load( 'sounds/Project_Utopia.ogg', function( buffer ) {
+					sound4.setBuffer( buffer );
+					sound4.setLoop(true);
+					sound4.setVolume(0.5);
+					sound4.play();
+				});

 				// ground


--- a/src/audio/Audio.js
+++ b/src/audio/Audio.js
 /**
 * @author mrdoob / http://mrdoob.com/
+ * @author Reece Aaron Lecrivain / http://reecenotes.com/
 */

 THREE.Audio = function ( listener ) {
@@ -38,10 +39,13 @@ THREE.Audio.prototype.getOutput = function () {

 THREE.Audio.prototype.load = function ( file ) {

-	var buffer = new THREE.AudioBuffer( this.context );
-	buffer.load( file );
+	console.warn( 'THREE.Audio: .load has been deprecated. Please use THREE.AudioLoader.' );

-	this.setBuffer( buffer );
+	var audioLoader = new THREE.AudioLoader( this.context );
+
+	audioLoader.load( file, function ( buffer ) {
+		this.setBuffer( buffer );
+	});

 	return this;

@@ -62,13 +66,9 @@ THREE.Audio.prototype.setBuffer = function ( audioBuffer ) {

 	var scope = this;

-	audioBuffer.onReady( function( buffer ) {
-
-		scope.source.buffer = buffer;
-		scope.sourceType = 'buffer';
-		if ( scope.autoplay ) scope.play();
-
-	} );
+	scope.source.buffer = audioBuffer;
+	scope.sourceType = 'buffer';
+	if ( scope.autoplay ) scope.play();

 	return this;

@@ -213,7 +213,7 @@ THREE.Audio.prototype.getPlaybackRate = function () {

 };

-THREE.Audio.prototype.onEnded = function() {
+THREE.Audio.prototype.onEnded = function () {

 	this.isPlaying = false;


--- a/src/audio/AudioBuffer.js
+++ b/src/audio/AudioBuffer.js
-/**
- * @author mrdoob / http://mrdoob.com/
- */
-
-THREE.AudioBuffer = function ( context ) {
-
-	this.context = context;
-	this.ready = false;
-	this.readyCallbacks = [];
-
-};
-
-THREE.AudioBuffer.prototype.load = function ( file ) {
-
-	var scope = this;
-
-	var request = new XMLHttpRequest();
-	request.open( 'GET', file, true );
-	request.responseType = 'arraybuffer';
-	request.onload = function ( e ) {
-
-		scope.context.decodeAudioData( this.response, function ( buffer ) {
-
-			scope.buffer = buffer;
-			scope.ready = true;
-
-			for ( var i = 0; i < scope.readyCallbacks.length; i ++ ) {
-
-				scope.readyCallbacks[ i ]( scope.buffer );
-
-			}
-
-			scope.readyCallbacks = [];
-
-		} );
-
-	};
-	request.send();
-
-	return this;
-
-};
-
-THREE.AudioBuffer.prototype.onReady = function ( callback ) {
-
-	if ( this.ready ) {
-
-		callback( this.buffer );
-
-	} else {
-
-		this.readyCallbacks.push( callback );
-
-	}
-
-};
--- a/src/loaders/AudioLoader.js
+++ b/src/loaders/AudioLoader.js
+/**
+ * @author Reece Aaron Lecrivain / http://reecenotes.com/
+ */
+
+THREE.AudioLoader = function ( context, manager ) {
+
+	this.context = ( context !== undefined ) ? context : new ( window.AudioContext || window.webkitAudioContext )();
+
+	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+
+};
+
+THREE.AudioLoader.prototype = {
+
+	constructor: THREE.AudioLoader,
+
+	load: function ( url, onLoad, onProgress, onError ) {
+
+		var scope = this;
+
+		var loader = new THREE.XHRLoader( this.manager );
+		loader.setResponseType( 'arraybuffer' );
+		loader.load( url, function ( buffer ) {
+
+			scope.context.decodeAudioData( buffer, function ( audioBuffer ) {
+
+				onLoad( audioBuffer );
+
+			} );
+
+		}, onProgress, onError );
+
+	}
+
+};
--- a/utils/build/includes/common.json
+++ b/utils/build/includes/common.json
@@ -54,7 +54,6 @@
 	"src/animation/tracks/VectorKeyframeTrack.js",
 	"src/audio/Audio.js",
 	"src/audio/AudioAnalyser.js",
-	"src/audio/AudioBuffer.js",
 	"src/audio/PositionalAudio.js",
 	"src/audio/AudioListener.js",
 	"src/cameras/Camera.js",
@@ -69,6 +68,7 @@
 	"src/lights/HemisphereLight.js",
 	"src/lights/PointLight.js",
 	"src/lights/SpotLight.js",
+	"src/loaders/AudioLoader.js",
 	"src/loaders/Cache.js",
 	"src/loaders/Loader.js",
 	"src/loaders/XHRLoader.js",