Javascript Web音频API-从另一个节点创建AudioBufferSourceNode？

是否可以从另一个节点创建AudioBufferSourceNode

我问这个问题的原因是，我试图创建一个波形可视化，不仅仅是从一个缓冲源，而是一整首完成的歌曲，我用网络音频API“编程”。我可以完美地计时和编程这首歌，最终它听起来正是我想要的。我还可以从我用来创作歌曲的源WAV文件中创建单独的可视化效果

我使用本文中的代码创建可视化效果，并在多个画布中显示它们：

下面是创建可视化的代码片段：

var canvas1 = document.querySelector('.visualizer1');
var canvasCtx1 = canvas1.getContext("2d");
createvis(mybuffer, canvasCtx1);

function createvis(buff, Ctx) {

        var leftChannel = buff.getChannelData(0); // Float32Array describing left channel     
        var lineOpacity = 640 / leftChannel.length;
        Ctx.save();
        Ctx.fillStyle = '#222';
        Ctx.fillRect(0, 0, 640, 100);
        Ctx.strokeStyle = '#121';
        Ctx.globalCompositeOperation = 'lighter';
        Ctx.translate(0, 100 / 2);
        Ctx.globalAlpha = 0.06; // lineOpacity ;

        for (var i = 0; i < leftChannel.length; i++) {
            // on which line do we get ?
            var x = Math.floor(640 * i / leftChannel.length);
            var y = leftChannel[i] * 100 / 2;
            Ctx.beginPath();
            Ctx.moveTo(x, 0);
            Ctx.lineTo(x + 1, y);
            Ctx.stroke();
        }
        Ctx.restore();
    }

var canvas1=document.querySelector（'.visualizer1'）；
var canvasCtx1=canvas1.getContext（“2d”）；
createvis（mybuffer，canvasCtx1）；
函数createvis（buff，Ctx）{
var leftChannel=buff.getChannelData（0）；//描述左通道的Float32Array
var lineOpacity=640/leftChannel.length；
Ctx.save（）；
Ctx.fillStyle='#222'；
Ctx.fillRect（0,0640100）；
Ctx.strokeStyle='#121'；
Ctx.globalCompositeOperation='lighter'；
Ctx.translate（01100/2）；
Ctx.globalAlpha=0.06；//线条不透明度；
对于（变量i=0；i

结果很酷。最后，我为每个源缓冲区创建了一个如下所示的图像：

但是，当我将各种源缓冲加载到createBufferSource节点时，我将它们链接起来并添加效果，我在这里生成的波形最好能反映这些效果。如果最终的context.destination包含所有内容（即完成的歌曲）的输出也可以可视化，那就太好了

我还想最终改变我的“程序”，这样它不仅可以从源wav文件中汇编一首歌曲，还可以将它们与从头开始生成信号的节点相结合，显然，这些特定的声音没有任何源缓冲区来创建可视化

---

有人知道使用javascript web audio api是否可以做到这一点吗？

所以您想创建一个您还没有完成的可视化功能？我的意思是，所有这些过滤器等都是实时完成的，对吗？因此，除了这个XY问题之外，我为您提供了两个选择：1。也要实时进行可视化，因为，2将输出录制一次，然后将录制的音频转换为AudioBufferSourceNode，然后像现在这样做，或者甚至只将输出图像和音频存储在某个地方，因为这样会失去实时性的任何优势。类似于选项2的内容是我所想的。我非常愿意做一种“第一遍”来获得可视化效果，然后第二次运行它来真正听这首歌谢谢你的编辑，很难解读第一条评论；-）那么你至少还有两个选择。您可以使用scriptProcessorNode，保存所有需要的值，并在最后创建viz，或者您可以使用MediaRecorder，录制歌曲，然后将保存的Blob传递给文件读取器以获取其arrayBuffer版本，最后像您这样使用decodeAudioData。但是我建议您学习如何使用scriptProcessorNode，它提供了比您现在所做的更多的可伸缩性。