Utilizing various three-dimensional audio effects in Three.js

Question

Utilizing various three-dimensional audio effects in Three.js

I'm facing a bit of a challenge with this task.

My idea is to create a line consisting of cubes, each emitting a unique sound that can be heard when you approach it.

The objective is to navigate from the start of the line to the end, playing different sounds along the way to create a sort of 'music'.

The issue I'm encountering is that only 6 out of the 20 cubes are producing sound.

You can check out an online example here:

(Left click to move forward, Right click to move backward)

--

Here is the code snippet for generating the sound:

var Sound = function ( sources, radius, volume ) {
  // Code for creating audio and handling sound volumes
}

--

This section covers the creation of the cubes:

// Code for creating cubes with specific positions and sounds

--

And here's how I update the sounds based on the camera position (inside my render function):

// Code for updating sound based on camera distance

--

I'm unsure whether the limitation of only hearing 6 sounds is due to an error in my implementation or a constraint of Three.js, the browser, or another factor.

Any insights would be greatly appreciated!

EDIT 08/06/14

I was able to resolve this issue by implementing the Web Audio API. Here's the updated code block for creating the sound using frequency:

// Code for creating sound using Web Audio API with frequency

Cheers!

javascript audio three.js

Answer 1

Answer №1

To overcome the issue at hand, I successfully utilized the capabilities of the Web Audio API. For those interested, below is the solution I implemented to generate a desired frequency for audio playback.

Below is the function responsible for creating the sound:

if (window.hasOwnProperty('AudioContext') && !window.hasOwnProperty('webkitAudioContext'))
    window.webkitAudioContext = AudioContext;

var context = new webkitAudioContext();

var Sound = function ( radius, volume ) {

  var source = context.createBufferSource();
  var osc = context.createOscillator();
  var oscGain =context.createGainNode();
  osc.type = 0;

  osc.connect(oscGain);
  oscGain.connect(context.destination);
  osc.noteOn(0); 
  osc.frequency.value = 500;
  oscGain.gain.value = 0;

  this.position = new THREE.Vector3();

  this.update = function ( camera ) {
    var distance = this.position.distanceTo( camera.position );
    if ( distance <= radius ) {
      oscGain.gain.value = volume * ( 1 - distance / radius );

      material_sky.color.setHSL(distance / radius / 2 ,0.666,0.666);
    } else {
      oscGain.gain.value = 0;
    }
  }
}

Cheers!

Answer 2

To overcome the issue at hand, I successfully utilized the capabilities of the Web Audio API. For those interested, below is the solution I implemented to generate a desired frequency for audio playback.

Below is the function responsible for creating the sound:

if (window.hasOwnProperty('AudioContext') && !window.hasOwnProperty('webkitAudioContext'))
    window.webkitAudioContext = AudioContext;

var context = new webkitAudioContext();

var Sound = function ( radius, volume ) {

  var source = context.createBufferSource();
  var osc = context.createOscillator();
  var oscGain =context.createGainNode();
  osc.type = 0;

  osc.connect(oscGain);
  oscGain.connect(context.destination);
  osc.noteOn(0); 
  osc.frequency.value = 500;
  oscGain.gain.value = 0;

  this.position = new THREE.Vector3();

  this.update = function ( camera ) {
    var distance = this.position.distanceTo( camera.position );
    if ( distance <= radius ) {
      oscGain.gain.value = volume * ( 1 - distance / radius );

      material_sky.color.setHSL(distance / radius / 2 ,0.666,0.666);
    } else {
      oscGain.gain.value = 0;
    }
  }
}

Cheers!

Utilizing various three-dimensional audio effects in Three.js

Answer №1

Similar questions

"Utilize the on() method to bind a click event to dynamically generated elements received

JavaScript: Techniques for extracting multiple digits from a text

Tips for including an external .js file in a .php file

Is it possible for images underneath to receive focus when hovering over them?

Accessing an Array from a service method in Angular and passing it to my main component

What are the best methods for capturing audio directly from a web browser?

Managing and displaying information provided through forms

What is the best way to retrieve the identifier for a specific role?

The failure to display relevant data from the database when adding new rows to a table

Updates to Providers in the latest release of Angular 2

Sending a 2-dimensional array from JavaScript to the server using AJAX

Error message from BitBucket pipeline indicates that the npm command was not found

Prevent the selection of Single Origin and House Blend options once the user opts for Espresso

Setting the default type of an array in props in Vue 2 is a common need for many developers

Ensure that my program is halted until the xmlhttprequest has completed

Steps to gather all the images within a directory

The Angular error TS2531 occurs when attempting to call scrollIntoView on an object that may be null

Four unique chip/tag colors, personalized to suit your style

Extracting information from a string with JSON in Javascript

What are the best practices for utilizing "async/await" and "promises" in Node.js to achieve synchronous execution?