Merge pull request #7562 from vincent-courtalon/dev_audio_#7485

Dev audio #7485

examples/misc_sound.html

@@ -23,7 +23,7 @@
 			#info {
 				color:#fff;
 				position: absolute;
-				top: 0px; width: 100%;
+				top: 0px; left: 0px; width: 50%;
 				padding: 5px;
 				z-index:100;
 			}
@@ -34,8 +34,8 @@
 		<div id="info">
 			<a href="http://threejs.org" target="_blank">three.js</a> - webgl 3d sounds example -
 			music by <a href="http://www.newgrounds.com/audio/listen/358232" target="_blank">larrylarrybb</a> and
-			<a href="http://www.newgrounds.com/audio/listen/376737" target="_blank">skullbeatz</a> <br/><br/>
-
+			<a href="http://www.newgrounds.com/audio/listen/376737" target="_blank">skullbeatz</a>  and 
+			<a href="http://opengameart.org/content/project-utopia-seamless-loop" target="_blank">congusbongus</a><br/><br/>
 			navigate with WASD / arrows / mouse
 		</div>
 
@@ -48,6 +48,8 @@
 
 		<script src="js/Detector.js"></script>
 
+		<script src="js/libs/dat.gui.min.js"></script>
+
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
@@ -74,13 +76,7 @@
 				var listener = new THREE.AudioListener();
 				camera.add( listener );
 
-				controls = new THREE.FirstPersonControls( camera );
-
-				controls.movementSpeed = 70;
-				controls.lookSpeed = 0.05;
-				controls.noFly = true;
-				controls.lookVertical = false;
-
+				
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0035 );
 
@@ -92,6 +88,7 @@
 
 				material_sphere1 = new THREE.MeshLambertMaterial( { color: 0xffaa00, shading: THREE.FlatShading } );
 				material_sphere2 = new THREE.MeshLambertMaterial( { color: 0xff2200, shading: THREE.FlatShading } );
+				material_sphere3 = new THREE.MeshLambertMaterial( { color: 0x6622aa, shading: THREE.FlatShading } );
 
 				// sound spheres
 
@@ -99,7 +96,7 @@
 				mesh1.position.set( -250, 30, 0 );
 				scene.add( mesh1 );
 
-				var sound1 = new THREE.Audio( listener );
+				var sound1 = new THREE.PositionalAudio( listener );
 				sound1.load( 'sounds/358232_j_s_song.ogg' );
 				sound1.setRefDistance( 20 );
 				sound1.autoplay = true;
@@ -111,12 +108,35 @@
 				mesh2.position.set( 250, 30, 0 );
 				scene.add( mesh2 );
 
-				var sound2 = new THREE.Audio( listener );
+				var sound2 = new THREE.PositionalAudio( listener );
 				sound2.load( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg' );
 				sound2.setRefDistance( 20 );
 				sound2.autoplay = true;
 				mesh2.add( sound2 );
-
+				
+				
+				var mesh3 = new THREE.Mesh( sphere, material_sphere3 );
+				mesh3.position.set( 0, 30, -250 );
+				scene.add( mesh3 );
+				
+				var sound3 = new THREE.PositionalAudio( listener );
+				var oscillator = listener.context.createOscillator();
+				oscillator.type = 'sine';
+				oscillator.frequency.value = 144;
+				oscillator.start(0);
+				sound3.setNodeSource(oscillator);
+				sound3.setRefDistance( 20 );
+				sound3.setVolume(0.5);
+				mesh3.add(sound3);
+				
+				// 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);
+				
 				// ground
 
 				var helper = new THREE.GridHelper( 500, 10 );
@@ -126,6 +146,49 @@
 				scene.add( helper );
 
 				//
+    			var SoundControls = function() {
+					   this.master = listener.getMasterVolume();
+					   this.firstSphere =  sound1.getVolume();
+					   this.secondSphere =  sound2.getVolume();
+					   this.thirdSphere = sound3.getVolume();
+					   this.Ambient =  sound4.getVolume();
+				};
+				var GeneratorControls = function() {
+					   this.frequency = oscillator.frequency.value;
+					   this.wavetype = oscillator.type;
+				}
+      			var gui = new dat.GUI();
+				var soundControls = new SoundControls();
+				var generatorControls = new GeneratorControls();
+				var volumeFolder = gui.addFolder('sound volume');
+				var generatorFolder = gui.addFolder('sound generator');
+				volumeFolder.add(soundControls, 'master').min(0.0).max(1.0).step(0.01).onChange(function() {
+					listener.setMasterVolume(soundControls.master);
+				});
+				volumeFolder.add(soundControls, 'firstSphere').min(0.0).max(1.0).step(0.01).onChange(function() {
+					sound1.setVolume(soundControls.firstSphere);
+				});
+				volumeFolder.add(soundControls, 'secondSphere').min(0.0).max(1.0).step(0.01).onChange(function() {
+					sound2.setVolume(soundControls.secondSphere);
+				});
+				
+				volumeFolder.add(soundControls, 'thirdSphere').min(0.0).max(1.0).step(0.01).onChange(function() {
+					sound3.setVolume(soundControls.thirdSphere);
+				});
+				volumeFolder.add(soundControls, 'Ambient').min(0.0).max(1.0).step(0.01).onChange(function() {
+					sound4.setVolume(soundControls.Ambient);
+				});
+				volumeFolder.open();
+				generatorFolder.add(generatorControls, 'frequency').min(50.0).max(5000.0).step(1.0).onChange(function() {
+					oscillator.frequency.value = generatorControls.frequency;
+				});
+				generatorFolder.add(generatorControls, 'wavetype', ['sine', 'square', 'sawtooth', 'triangle']).onChange(function() {
+					oscillator.type = generatorControls.wavetype;
+				});
+				generatorFolder.open();
+				
+
+
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -135,6 +198,14 @@
 				container.appendChild( renderer.domElement );
 
 				//
+				controls = new THREE.FirstPersonControls( camera, renderer.domElement );
+
+				controls.movementSpeed = 70;
+				controls.lookSpeed = 0.05;
+				controls.noFly = true;
+				controls.lookVertical = false;
+
+				
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -168,6 +239,7 @@
 
 				material_sphere1.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
 				material_sphere2.color.setHSL( 0.1, 0.3 + 0.7 * ( 1 + Math.sin( time ) ) / 2, 0.5 );
+				material_sphere3.color.setHSL( 0.1, 0.5, 0.3 + 0.7 * ( 1 + Math.sin( time ) ) / 2);
 
 				renderer.render( scene, camera );
 

examples/sounds/readme.txt

@@ -5,4 +5,8 @@ Bad Cat [Master Version] by Skullbeatz
 http://www.newgrounds.com/audio/listen/376737
 
 The Sound of Epicness by larrylarrybb
-http://www.newgrounds.com/audio/listen/358232
+http://www.newgrounds.com/audio/listen/358232
+
+Music from opengameart, licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
+Project Utopia by congusbongus
+http://opengameart.org/content/project-utopia-seamless-loop

src/audio/Audio.js

@@ -13,46 +13,61 @@ THREE.Audio = function ( listener ) {
 	this.source.onended = this.onEnded.bind( this );
 
 	this.gain = this.context.createGain();
-	this.gain.connect( this.context.destination );
-
-	this.panner = this.context.createPanner();
-	this.panner.connect( this.gain );
+	this.gain.connect( listener.getOutputNode());
 
 	this.autoplay = false;
 
 	this.startTime = 0;
 	this.playbackRate = 1;
 	this.isPlaying = false;
+	this.hasPlaybackControl = true;
+	this.sourceType = 'empty';
 
 };
 
 THREE.Audio.prototype = Object.create( THREE.Object3D.prototype );
 THREE.Audio.prototype.constructor = THREE.Audio;
 
-THREE.Audio.prototype.load = function ( file ) {
 
-	var scope = this;
+THREE.Audio.prototype.load = function ( fileName ) {
+
+	var audioBuffer = new THREE.AudioBuffer(this.context);
+	audioBuffer.load(fileName);
+	this.setBuffer(audioBuffer);
+	return this;
+
+};
+
 
-	var request = new XMLHttpRequest();
-	request.open( 'GET', file, true );
-	request.responseType = 'arraybuffer';
-	request.onload = function ( e ) {
+THREE.Audio.prototype.setNodeSource = function ( audioNode ) {
 
-		scope.context.decodeAudioData( this.response, function ( buffer ) {
+	this.hasPlaybackControl = false;
+	this.sourceType = 'audioNode';
+	this.source = audioNode;
+	this.connect();
+	
+	return this;
 
-			scope.source.buffer = buffer;
+};
 
-			if ( scope.autoplay ) scope.play();
 
-		} );
 
-	};
-	request.send();
+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();
+	});
 
 	return this;
 
 };
 
+
+
 THREE.Audio.prototype.play = function () {
 
 	if ( this.isPlaying === true ) {
@@ -61,6 +76,14 @@ THREE.Audio.prototype.play = function () {
 		return;
 
 	}
+	
+	if ( this.hasPlaybackControl === false ) {
+
+		console.warn( 'THREE.Audio: this Audio has no playback control.' );
+		return;
+
+	}
+
 
 	var source = this.context.createBufferSource();
 
@@ -80,6 +103,13 @@ THREE.Audio.prototype.play = function () {
 
 THREE.Audio.prototype.pause = function () {
 
+	if (this.hasPlaybackControl === false) {
+		
+		console.warn( 'THREE.Audio: this Audio has no playback control.' );
+		return;
+		
+	}
+	
 	this.source.stop();
 	this.startTime = this.context.currentTime;
 
@@ -87,6 +117,13 @@ THREE.Audio.prototype.pause = function () {
 
 THREE.Audio.prototype.stop = function () {
 
+	if (this.hasPlaybackControl === false) {
+		
+		console.warn( 'THREE.Audio: this Audio has no playback control.' );
+		return;
+		
+	}
+
 	this.source.stop();
 	this.startTime = 0;
 
@@ -97,11 +134,11 @@ THREE.Audio.prototype.connect = function () {
 	if ( this.filter !== undefined ) {
 
 		this.source.connect( this.filter );
-		this.filter.connect( this.panner );
+		this.filter.connect( this.gain );
 
 	} else {
 
-		this.source.connect( this.panner );
+		this.source.connect( this.gain );
 
 	}
 
@@ -112,11 +149,11 @@ THREE.Audio.prototype.disconnect = function () {
 	if ( this.filter !== undefined ) {
 
 		this.source.disconnect( this.filter );
-		this.filter.disconnect( this.panner );
+		this.filter.disconnect( this.gain );
 
 	} else {
 
-		this.source.disconnect( this.panner );
+		this.source.disconnect( this.gain );
 
 	}
 
@@ -146,6 +183,13 @@ THREE.Audio.prototype.getFilter = function () {
 
 THREE.Audio.prototype.setPlaybackRate = function ( value ) {
 
+	if (this.hasPlaybackControl === false) {
+		
+		console.warn( 'THREE.Audio: this Audio has no playback control.' );
+		return;
+		
+	}
+
 	this.playbackRate = value;
 
 	if ( this.isPlaying === true ) {
@@ -170,39 +214,30 @@ THREE.Audio.prototype.onEnded = function() {
 
 THREE.Audio.prototype.setLoop = function ( value ) {
 
+	if (this.hasPlaybackControl === false) {
+		
+		console.warn( 'THREE.Audio: this Audio has no playback control.' );
+		return;
+		
+	}
+
 	this.source.loop = value;
 
 };
 
 THREE.Audio.prototype.getLoop = function () {
+	
+	if (this.hasPlaybackControl === false) {
+		
+		console.warn( 'THREE.Audio: this Audio has no playback control.' );
+		return false;
+		
+	}
 
 	return this.source.loop;
 
 };
 
-THREE.Audio.prototype.setRefDistance = function ( value ) {
-
-	this.panner.refDistance = value;
-
-};
-
-THREE.Audio.prototype.getRefDistance = function () {
-
-	return this.panner.refDistance;
-
-};
-
-THREE.Audio.prototype.setRolloffFactor = function ( value ) {
-
-	this.panner.rolloffFactor = value;
-
-};
-
-THREE.Audio.prototype.getRolloffFactor = function () {
-
-	return this.panner.rolloffFactor;
-
-};
 
 THREE.Audio.prototype.setVolume = function ( value ) {
 
@@ -216,18 +251,3 @@ THREE.Audio.prototype.getVolume = function () {
 
 };
 
-THREE.Audio.prototype.updateMatrixWorld = ( function () {
-
-	var position = new THREE.Vector3();
-
-	return function updateMatrixWorld( force ) {
-
-		THREE.Object3D.prototype.updateMatrixWorld.call( this, force );
-
-		position.setFromMatrixPosition( this.matrixWorld );
-
-		this.panner.setPosition( position.x, position.y, position.z );
-
-	};
-
-} )();

src/audio/AudioBuffer.js

@@ -0,0 +1,51 @@
+/**
+ * @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);
+	}
+
+};
+

src/audio/AudioListener.js

@@ -9,12 +9,71 @@ THREE.AudioListener = function () {
 	this.type = 'AudioListener';
 
 	this.context = new ( window.AudioContext || window.webkitAudioContext )();
-
+	this.masterGain =  this.context.createGain();
+	this.masterGain.connect(this.context.destination);
+	this.filter = null;
+	
 };
 
 THREE.AudioListener.prototype = Object.create( THREE.Object3D.prototype );
 THREE.AudioListener.prototype.constructor = THREE.AudioListener;
 
+THREE.AudioListener.prototype.getOutputNode = function () {
+	
+	return this.masterGain;
+	
+};
+
+THREE.AudioListener.prototype.removeFilter = function ( ) {
+	
+	if (this.filter !== null) {
+	
+		this.masterGain.disconnect(this.filter);
+		this.filter.disconnect(this.context.destination);
+		this.masterGain.connect(this.context.destination);
+		this.filter = null;
+		
+	}
+	
+}
+
+THREE.AudioListener.prototype.setFilter = function ( value ) {
+
+	if (this.filter !== null) {
+		
+		this.masterGain.disconnect(this.filter);
+		this.filter.disconnect(this.context.destination);
+
+	} else {
+		
+		this.masterGain.disconnect(this.context.destination);
+		
+	}
+	this.filter = value;
+	this.masterGain.connect(this.filter);
+	this.filter.connect(this.context.destination);	
+	
+};
+
+THREE.AudioListener.prototype.getFilter = function () {
+
+	return this.filter;
+
+};
+
+THREE.AudioListener.prototype.setMasterVolume = function ( value ) {
+
+	this.masterGain.gain.value = value;
+
+};
+
+THREE.AudioListener.prototype.getMasterVolume = function () {
+
+	return this.masterGain.gain.value;
+
+};
+
+
 THREE.AudioListener.prototype.updateMatrixWorld = ( function () {
 
 	var position = new THREE.Vector3();

src/audio/PositionalAudio.js

@@ -0,0 +1,134 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.PositionalAudio = function ( listener ) {
+
+	THREE.Audio.call( this, listener );
+
+	this.panner = this.context.createPanner();
+	this.panner.connect( this.gain );
+
+};
+
+THREE.PositionalAudio.prototype = Object.create( THREE.Audio.prototype );
+THREE.PositionalAudio.prototype.constructor = THREE.PositionalAudio;
+
+
+
+THREE.PositionalAudio.prototype.connect = function () {
+
+	if ( this.filter !== undefined ) {
+
+		this.source.connect( this.filter );
+		this.filter.connect( this.panner );
+
+	} else {
+
+		this.source.connect( this.panner );
+
+	}
+
+};
+
+THREE.PositionalAudio.prototype.disconnect = function () {
+
+	if ( this.filter !== undefined ) {
+
+		this.source.disconnect( this.filter );
+		this.filter.disconnect( this.panner );
+
+	} else {
+
+		this.source.disconnect( this.panner );
+
+	}
+
+};
+
+THREE.PositionalAudio.prototype.setFilter = function ( value ) {
+
+	if ( this.isPlaying === true ) {
+
+		this.disconnect();
+		this.filter = value;
+		this.connect();
+
+	} else {
+
+		this.filter = value;
+
+	}
+
+};
+
+THREE.PositionalAudio.prototype.getFilter = function () {
+
+	return this.filter;
+
+};
+
+THREE.PositionalAudio.prototype.setRefDistance = function ( value ) {
+
+	this.panner.refDistance = value;
+
+};
+
+THREE.PositionalAudio.prototype.getRefDistance = function () {
+
+	return this.panner.refDistance;
+
+};
+
+THREE.PositionalAudio.prototype.setRolloffFactor = function ( value ) {
+
+	this.panner.rolloffFactor = value;
+
+};
+
+THREE.PositionalAudio.prototype.getRolloffFactor = function () {
+
+	return this.panner.rolloffFactor;
+
+};
+
+THREE.PositionalAudio.prototype.setDistanceModel = function ( value ) {
+
+	this.panner.distanceModel = value;
+
+};
+
+THREE.PositionalAudio.prototype.getDistanceModel = function () {
+
+	return this.panner.distanceModel;
+
+};
+
+THREE.PositionalAudio.prototype.setMaxDistance = function ( value ) {
+
+	this.panner.maxDistance = value;
+
+};
+
+THREE.PositionalAudio.prototype.getMaxDistance = function () {
+
+	return this.panner.maxDistance;
+
+};
+
+
+THREE.PositionalAudio.prototype.updateMatrixWorld = ( function () {
+
+	var position = new THREE.Vector3();
+
+	return function updateMatrixWorld( force ) {
+
+		THREE.Object3D.prototype.updateMatrixWorld.call( this, force );
+
+		position.setFromMatrixPosition( this.matrixWorld );
+
+		this.panner.setPosition( position.x, position.y, position.z );
+
+	};
+
+} )();

utils/build/includes/common.json

@@ -53,7 +53,9 @@
 	"src/animation/tracks/StringKeyframeTrack.js",
 	"src/animation/tracks/VectorKeyframeTrack.js",
 	"src/audio/Audio.js",
-	"src/audio/AudioListener.js",
+	"src/audio/AudioBuffer.js",	
+	"src/audio/PositionalAudio.js",
+	"src/audio/AudioListener.js",	
 	"src/cameras/Camera.js",
 	"src/cameras/CubeCamera.js",
 	"src/cameras/OrthographicCamera.js",