1

I am using a Cross Fading Playlist written in JavaScript. It relies on the Web Audio API. The code uses a shared class called shared.js to establish the web audio context.

My issue is that my VOLUME function only works when ONE SONG is in the playlist buffer. If I add two or more songs, the volume function is not responsive.

Why is this happening? Please check out my code. Thanks!!

/*
    (1) Below is my script: 'js/crossfade-playlist-sample.js'
    (2) I am also using 'shared.js' from (http://webaudioapi.com/static/js/shared.js)

    My version of 'crossfade-playlist-sample.js' works.  
    It is the funciton changeVolume() which fails to work when MORE THAN ONE SONG is in the Buffer 
    created with loadSounds();
*/

function CrossfadePlaylistSample() {
    this.FADE_TIME = 1; // Seconds
    this.isPlaying = false;
    loadSounds(this, {
        song1: 'http://localhost:63329/js/song1.mp3',
        song2: 'http://localhost:63329/js/song2.mp3'
    });
};

var source, gainNode, wetGain, buffer, duration, info;

function play() {

    playHelper([this.song1, this.song2], 1, 1);

    function createSource(buffer) {

        gainNode = context.createGain();
        wetGain = context.createGain();

        source = context.createBufferSource();
        source.buffer = this.buffer;

        source.connect(wetGain); // Connect source to gain nodes.
        wetGain.connect(gainNode); // Connect source to gain nodes.

        gainNode.connect(context.destination); // Connect gain to destination.

        return {
            source: source,
            gainNode: gainNode,
            wetGain: wetGain
        };
    }

    function playHelper(buffers, iterations, fadeTime) {

        var currTime = context.currentTime;
        for (var i = 0; i < iterations; i++) {
            // For each buffer, schedule its playback in the future.
            for (var j = 0; j < buffers.length; j++) {

                buffer = buffers[j];
                duration = buffer.duration;

                info = createSource(buffer);
                source = info.source;
                gainNode = info.gainNode;

                // Fade it in.
                gainNode.gain.linearRampToValueAtTime(0, currTime);
                gainNode.gain.linearRampToValueAtTime(1, currTime + fadeTime);

                // Then fade it out.
                gainNode.gain.linearRampToValueAtTime(1, currTime + duration - fadeTime);
                gainNode.gain.linearRampToValueAtTime(0, currTime + duration);

                // Play the track now.
                source[source.start ? 'start' : 'noteOn'](currTime);

                // Increment time for the next iteration.
                currTime += duration - fadeTime;
            }
        }
    }
};


function changeVolume(element) {

    var volume = element.value;
    var fraction = parseInt(element.value) / parseInt(element.max); 

    wetGain.gain.value = fraction * fraction;    
};
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <script src="js/shared.js"></script>
    <script src="js/crossfade-playlist-sample.js"></script>
    <script>
        CrossfadePlaylistSample();
    </script>
</head>

<body style="color: navajowhite;">
    <input type="button" onclick="play();" value="Play" />
    <input type="range" min="0" max="100" value="100" oninput="changeVolume(this);" onchange="rangevalue.value=value;" />
</body>

</html>
anthony_s
  • 137
  • 2
  • 11
  • `Uncaught ReferenceError: context is not defined` – guest271314 Jun 19 '16 at 18:56
  • context is defined in "shared.js". My code points LOCAL, but you can copy the file from http://webaudioapi.com/static/js/shared.js That will resolve the problem. Also, my scripts are stored in a folder called 'js/'. You can make that rather easily and place the scripts inside 'js'. – anthony_s Jun 19 '16 at 19:02
  • Can you create a plnkr http://plnkr.co to demonstrate? – guest271314 Jun 19 '16 at 19:06
  • Great idea, I am setting it up now. – anthony_s Jun 19 '16 at 19:59
  • Okay, here is my Plunker: http://plnkr.co/users/afsanchez001 But the mp3 files cannot be uploaded so they are at my Github: https://github.com/afsanchez001/MyProject Thanks! – anthony_s Jun 19 '16 at 20:17
  • Downloading the project from my GitHub is the best troubleshooting option because it is self contained and it will run. Even the mp3s are there. Thanks. https://github.com/afsanchez001/MyProject – anthony_s Jun 19 '16 at 21:40
  • `song1.mp3` and `song2.mp3` appear to be same audio file? – guest271314 Jun 21 '16 at 05:44
  • What is expected result of `onchange="rangevalue.value=value;"` ? `rangevalue` does not appear to be defined? – guest271314 Jun 21 '16 at 06:31
  • Yeah they are the same file, you can hear when they crossover. The rangevalue.value=value; is the new Volume Level when the onChange event is triggered. That's it. – anthony_s Jun 28 '16 at 16:14

0 Answers0