Question

要再次回放底层缓冲区，您应该创建一个新的AudioBufferSourceNode。

我真的可以使用这个例子，因为我无法在任何地方找到它。

我想在此结束时发出命令＆＃34;否则/如果＆＃34;这会创建一个新缓冲区。

这是我的代码：

$('#container_button').click(function () {
    if (musicPaused == true) {
         musicPaused = false;
         document.getElementById("button").className = "play-button-down";
         document.getElementById("triangle").className = "triangle-class-down";
         document.getElementById("lighter_triangle").className = "lighter-triangle-class-down";
         document.getElementById("darker_triangle").className = "darker-triangle-class-down";
         sourceBuffer.start(context.currentTime);

    } else if (musicPaused == false) {
         document.getElementById("button").className = "play-button-up";
         document.getElementById("triangle").className = "triangle-class-up";
         document.getElementById("lighter_triangle").className = "lighter-triangle-class-up";
         document.getElementById("darker_triangle").className = "darker-triangle-class-up";
         musicPaused = true;
         sourceBuffer.disconnect(analyser);
    }   
});

现在整个页面都在这里：

http://www.musicrevolutiondev.com/WebAudioAPI/Prototype_v12.html

Answer 1

我能够让这个工作。我需要在新缓冲区上使用“decodeAudioData（）”方法，以便可以定义“buffer”：

/* Global variables */  

        var context = new (window.AudioContext || window.webkitAudioContext)();
        var analyser = context.createAnalyser();
        var sourceBuffer = context.createBufferSource();
        var musicPaused = true;

/* Initialize audio*/


        var setAudio = function (buffer) {
            sourceBuffer.buffer = buffer;
            sourceBuffer.connect(analyser);
            analyser.connect(context.destination);
        };


/*Load and set audio*/

        function loadAudio() {
            var request = new XMLHttpRequest();
            request.open('GET', 'http://www.musicrevolutiondev.com/streamapp/music/Lynne_Publishing_00124511_Sunny_Autumn.mp3', true);
            request.responseType = 'arraybuffer';
            request.onload = function () {
            var undecodedAudio = request.response;
            context.decodeAudioData(undecodedAudio, function (buffer) {
                 setAudio(buffer);
                });
            };

            request.send();
        };  

/*Load and set audio on page load*/         

        window.onload = loadAudio();


/* Equalizer */             
        var canvas = document.querySelector('.visualizer');
        var canvasCtx = canvas.getContext("2d");
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;
        var drawVisual;
        analyser.fftSize = 256;
        var bufferLength = analyser.frequencyBinCount;
        var dataArray = new Uint8Array(bufferLength);
        canvasCtx.clearRect(0, 0, canvasWidth, canvasHeight);

        function draw() {
            drawVisual = requestAnimationFrame(draw);

            analyser.getByteFrequencyData(dataArray);

            canvasCtx.fillStyle = 'rgb(0, 0, 0)';
            canvasCtx.fillRect(0, 0, canvasWidth, canvasHeight);

            var barWidth = (canvasWidth / bufferLength) * 2.5;
            var barHeight;
            var x = 0;

            for(var i = 0; i < bufferLength; i++) {
                barHeight = dataArray[i]/2;

                canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
                canvasCtx.fillRect(x,canvasHeight-barHeight/2,barWidth,barHeight);

                x += barWidth + 1;
            }
        };

            draw();

/* When play button is clicked */                   

        $('#container_button').click(function () {
            if (musicPaused == true) {
                 musicPaused = false;
                 document.getElementById("button").className = "play-button-down";
                 document.getElementById("triangle").className = "triangle-class-down";
                 document.getElementById("lighter_triangle").className = "lighter-triangle-class-down";
                 document.getElementById("darker_triangle").className = "darker-triangle-class-down";
                 sourceBuffer.start(context.currentTime);

        } else if (musicPaused == false) {
                 document.getElementById("button").className = "play-button-up";
                 document.getElementById("triangle").className = "triangle-class-up";
                 document.getElementById("lighter_triangle").className = "lighter-triangle-class-up";
                 document.getElementById("darker_triangle").className = "darker-triangle-class-up";
                 musicPaused = true;
                 sourceBuffer.disconnect(analyser);
                 sourceBuffer.stop(0);
                 sourceBuffer = null;
                 sourceBuffer = context.createBufferSource();
                 loadAudio();
            }   
        });

如何创建新缓冲区以在Web Audio API中恢复播放？

1 个答案: