Question

我使用的是用JavaScript编写的交叉渐变播放列表。它依赖于Web Audio API。该代码使用名为shared.js的共享类来建立Web音频上下文。

我的问题是我的VOLUME功能仅在ONE SONG位于播放列表缓冲区时才有效。如果我添加两首或更多歌曲，则音量功能无响应。

为什么会这样？请查看我的代码。谢谢！

＆＃13;

/*
    (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;    
};

＆＃13;

<!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>

＆＃13;

卷不适用于Javascript Web Audio API播放列表示例

0 个答案: