Sign in to follow this  

Extending Three.js Audio Code not working

This topic is 679 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi, I'm extending some code I found in a tutorial on how to make 3d bar graph objects react to audio volumes, the original code uses 2 bars, but I tried extending it to 4. It's not working, however when I log the object, it's there and reading it just fine. The objects are getting their image textures as well, since I changed the textures and it still partially worked. But no matter what I do, only 2 bars are showing.

    // global variables
    var renderer;
    var scene;
    var camera;
    var control;
    var stats;

    /**
     * Initializes the scene, camera and objects. Called when the window is
     * loaded by using window.onload (see below)
     */
    function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render, sets the background color and the size
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x000000, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(80, 80);
        var planeMaterial = new THREE.MeshPhongMaterial({color: 0x3333ff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = -2;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(3, 6, 3, 15, 25, 15);

        var pm = new THREE.ParticleBasicMaterial();
        pm.map = THREE.ImageUtils.loadTexture("../assets/textures/particles/particle4.png");
        pm.blending= THREE.AdditiveBlending;
        pm.transparent = true;
        pm.size=1.0;
        var ps = new THREE.ParticleSystem(cubeGeometry, pm);
        ps.sortParticles = true;
        ps.name='cube';
        ps.position.x=1.75;
        scene.add(ps);

        var pm2 = pm.clone();
        pm2.map = THREE.ImageUtils.loadTexture("../assets/textures/particles/particle3.png");
        var ps2 = new THREE.ParticleSystem(cubeGeometry, pm2);
        ps2.name = 'cube2';
        ps2.position.x=-1.75;
        scene.add(ps2);

        var pm3 = pm.clone();
        pm3.map = THREE.ImageUtils.loadTexture("../assets/textures/particles/particle2.png");
        var ps3 = new THREE.ParticleSystem(cubeGeometry, pm3);
        ps3.name = 'cube3';
        ps3.position.x=-1.75;
        scene.add(ps3);

        console.log(ps3);

        var pm4 = pm.clone();
        pm4.map = THREE.ImageUtils.loadTexture("../assets/textures/particles/particle.png");
        var ps4 = new THREE.ParticleSystem(cubeGeometry, pm4);
        ps4.name = 'cube4';
        ps4.position.x=-1.75;
        scene.add(ps4);

//        cube.name='cube';
//        cube.castShadow = true;

        // add the cube to the scene
//        scene.add(cube);

        // position and point the camera to the center of the scene
        camera.position.x = 10;
        camera.position.y = 14;
        camera.position.z = 10;
        camera.lookAt(scene.position);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(10, 20, 20);
        spotLight.shadowCameraNear = 20;
        spotLight.shadowCameraFar = 50;
        spotLight.castShadow = true;

        scene.add(spotLight);

        // setup the control object for the control gui
        //control = new function() {
        //    this.rotationSpeed = 0.005;
        //    this.opacity = 0.6;
//      //      this.color = cubeMaterial.color.getHex();
        //};

        // add extras
        //addControlGui(control);
        //addStatsObject();


        // add the output of the renderer to the html element
        document.body.appendChild(renderer.domElement);

        console.log('Log statement from the init function');
//        console.log(cube);


        // call the render function, after the first render, interval is determined
        // by requestAnimationFrame
        setupSound();
        render();


        loadSound("../assets/audio/01-01- Flying In A Blue Dream.ogg");

    }


    //function addControlGui(controlObject) {
    //    var gui = new dat.GUI();
        //gui.add(controlObject, 'rotationSpeed', -0.01, 0.01);
    //}

    //function addStatsObject() {
    //    stats = new Stats();
    //    stats.setMode(0);

    //    stats.domElement.style.position = 'absolute';
    //    stats.domElement.style.left = '0px';
    //    stats.domElement.style.top = '0px';

    //    document.body.appendChild( stats.domElement );
    //}

    var context;
    var sourceNode;
    var analyser;
    var analyser2;
    var analyser3;
    var analyser4;

    /**
     * Called when the scene needs to be rendered. Delegates to requestAnimationFrame
     * for future renders
     */
    function render() {
        // update the camera
        var rotSpeed = 0.005//control.rotationSpeed;
        camera.position.x = camera.position.x * Math.cos(rotSpeed) + camera.position.z * Math.sin(rotSpeed);
        camera.position.z = camera.position.z * Math.cos(rotSpeed) - camera.position.x * Math.sin(rotSpeed);
        camera.lookAt(scene.position);

        // update stats
        //stats.update();

        // and render the scene
        renderer.render(scene, camera);

        updateCubes();

        // render using requestAnimationFrame
        requestAnimationFrame(render);
    }





    function updateCubes() {
        // get the average for the first channel
        var array =  new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);
        var average = getAverageVolume(array);

        // get the average for the second channel
        var array2 =  new Uint8Array(analyser2.frequencyBinCount);
        analyser2.getByteFrequencyData(array2);
        var average2 = getAverageVolume(array2);

        var array3 =  new Uint8Array(analyser3.frequencyBinCount);
        analyser3.getByteFrequencyData(array3);
        var average3 = getAverageVolume(array3);

        var array4 =  new Uint8Array(analyser4.frequencyBinCount);
        analyser4.getByteFrequencyData(array4);
        var average4 = getAverageVolume(array4);

        // clear the current state
        if (scene.getObjectByName('cube')) {
            var cube = scene.getObjectByName('cube');
            var cube2 = scene.getObjectByName('cube2');
            var cube3 = scene.getObjectByName('cube3');
            var cube4 = scene.getObjectByName('cube4');

            cube.scale.y=average/50;
            cube2.scale.y=average2/50;
            cube3.scale.y=average2/50;
            cube4.scale.y=average2/50;
        }
    }



    function setupSound() {
        if (! window.AudioContext) {
            if (! window.webkitAudioContext) {
                alert('no audiocontext found');
            }
            window.AudioContext = window.webkitAudioContext;
        }
        context = new AudioContext();

        // setup a analyzer
        analyser = context.createAnalyser();
        analyser.smoothingTimeConstant = 0.4;
        analyser.fftSize = 1024;

        analyser2 = context.createAnalyser();
        analyser2.smoothingTimeConstant = 0.4;
        analyser2.fftSize = 1024;

        analyser3 = context.createAnalyser();
        analyser3.smoothingTimeConstant = 0.4;
        analyser3.fftSize = 1024;

        analyser4 = context.createAnalyser();
        analyser4.smoothingTimeConstant = 0.4;
        analyser4.fftSize = 1024;

        // create a buffer source node
        sourceNode = context.createBufferSource();
        var splitter = context.createChannelSplitter();
        var splitter2 = context.createChannelSplitter();

        // connect the source to the analyser and the splitter
        sourceNode.connect(splitter);

        // connect one of the outputs from the splitter to
        // the analyser
        splitter.connect(analyser,0);
        splitter.connect(analyser2,1);
        splitter2.connect(analyser3,0);
        splitter2.connect(analyser4,1);


        // and connect to destination
        sourceNode.connect(context.destination);

        context = new AudioContext();
    }


    function getAverageVolume(array) {
        var values = 0;
        var average;

        var length = array.length;

        // get all the frequency amplitudes
        for (var i = 0; i < length; i++) {
            values += array[i];
        }

        average = values / length;
        return average;
    }

    function playSound(buffer) {
        sourceNode.buffer = buffer;
        sourceNode.start(0);
    }

    // load the specified sound
    function loadSound(url) {
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';

        // When loaded decode the data
        request.onload = function() {

            // decode the data
            context.decodeAudioData(request.response, function(buffer) {
                // when the audio is decoded play the sound
                playSound(buffer);
            }, onError);
        }
        request.send();
    }

    function onError(e) {
        console.log(e);
    }


    /**
     * Function handles the resize event. This make sure the camera and the renderer
     * are updated at the correct moment.
     */
    function handleResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    // calls the init function when the window is done loading.
    window.onload = init;
    // calls the handleResize function when the window is resized
    window.addEventListener('resize', handleResize, false);

I'm wondering if using clone more than once is messing it up.

 

Please help!

Share this post


Link to post
Share on other sites

This topic is 679 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this