web audio

Demonstrates the use of the Web Audio API to produce spatialized audio. Note how the volume changes as you move closer to or further from the cube (drag middle mouse button). Note also how the sound is louder when you face the side of the cube that you first see when the app loads (drag left mouse button to orbit).

What if you wanted something simpler: a sound that plays at the same volume regardless of where the listener is? This is useful for atmospheric noises (wind, birds chirping, etc.). Instead of a panner node, a gain node could be used. It can be created via

var gainNode = audioContext.createGainNode();

its volume set between zero and one via, e.g.

gainNode.gain.value = 0.5;

and then connected to the source and destination the same as the panner in the example.

1-2-three
example 28: web audio

<!DOCTYPE html>
<html>
<head>
<title>example 28: web audio</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/three/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">

var audioContext;
var sound;

function init() {  
  audioContext = new AudioContext();
  
  var sound = new Audio();
  sound.addEventListener("canplaythrough",play,false);
  sound.src = "sounds/110guita-danke67-10602_hifi.mp3";
  sound.loop = true;
  
  function play() {
    // Keeps play from being called every time the sound loops
    sound.removeEventListener("canplaythrough",play,false);
    
    var source = audioContext.createMediaElementSource(sound);
    var panner = audioContext.createPanner();
    panner.coneOuterGain = 0.1;
    panner.coneOuterAngle = 90; // outside this, volume is coneOuterGain
    panner.coneInnerAngle = 5; // inside this, volume is full
    // Set the panner node to be at the origin looking in the +z direction.
    panner.setPosition(0,0,0);
    panner.setOrientation(0,0,1); // unit vector
    
    // Connect source->panner->destination
    panner.connect(audioContext.destination);
    source.connect(panner);
    
    sound.play();
  }

var mycanvas = document.getElementsByTagName("canvas")[0];
  var w = mycanvas.clientWidth;
  var h = mycanvas.clientHeight;

var renderer = new THREE.WebGLRenderer({canvas:mycanvas});
  renderer.setClearColor( 0xeeeeee, 1 );
  renderer.setSize( w, h );

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  scene.add(camera);
  
  // Camera looks toward negative z with y up
  camera.position.set( 5, 5, 100 );
  
  var control = new THREE.OrbitControls(camera,mycanvas);

var cube = new THREE.Mesh(
      new THREE.CubeGeometry( 5, 5, 5 ),
      new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
  );
  scene.add( cube );

var light = new THREE.PointLight( 0xFFFFFF );
  light.position.set( 10, 0, 10 );
  scene.add( light );
  
  var dt = 10;
  
  var renderFunc = function() {
    control.update(dt);
    renderer.render(scene,camera);
    var p = camera.position;
    audioContext.listener.setPosition(p.x, p.y, p.z);
  };
  
  setInterval(renderFunc,dt);
}
  
window.onload = init;
</script>
</head>
<body><canvas style="width:100%;height:95%;border:1px gray solid;"></body>
</html>

web audio

1-2-threeexample 28: web audio

1-2-three
example 28: web audio