Web Audio API - 从另一个节点创建AudioBufferSourceNode?

时间:2016-12-30 20:10:52

标签: javascript html5 audio canvas web-audio-api

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

我问的原因是我试图创建一个波形可视化,不仅仅是来自一个缓冲源,而是一个完整的歌曲,我编程"使用Web音频API。我可以完美地对这首歌进行时间和编程,这听起来就像我想要的那样。我还可以从用于创建歌曲的源WAV文件创建单独的可视化。

我使用这篇文章中的代码来创建可视化并在多个画布中显示它们:

Create a waveform of the full track with Web Audio API

所以这里是创建可视化的代码片段:

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();
    }

结果结果非常酷。我最终得到了每个源缓冲区的图像,如下所示:

http://www.bklorraine.com/waveform.png

然而,当我将各种源缓冲区加载到createBufferSource节点时,我将它们链接起来并添加效果,这对我在这里生成的波形反映这些效果会很好。如果包含所有内容的输出的最终context.destination(即完成的歌曲)也可以具有可视化,那也是很好的。

我还想最终改变我的&#34;计划&#34;所以它不仅仅是从源wav文件中组装一首歌,而且还将它们与从头开始生成信号的节点组合在一起,显然,这些特殊的声音不会有任何形式的源缓冲区来创建一个来自的可视化。

有没有人知道这是否可以使用javascript web audio api?

0 个答案:

没有答案