Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including audio-render with all npm packages installed. Try it out:

var audioRender = require("audio-render")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

audio-render v2.0.1

Class for rendering audio stream data for frequency/time domains. Browser/node.

Audio-render is a pass-through audio stream, providing structure for rendering stream audio data.

It resolves common routines like frequency analysis (fft), buffering data, reading pcm format, providing unified API for rendering both in node/browser, events, options, hooks etc. Creating new rendering components based on audio-render is as simple as creating them from scratch, but times more reliable. It is also useful for creating quick debuggers.


$ npm install audio-render

.pipe(Render(function (canvas) {
    var data = this.getFloatTimeDomainData();

    //draw volume, spectrum, spectrogram, waveform — any data you need


var Generator = require('audio-generator');
var Speaker = require('audio-speaker');
var RenderStream = require('audio-render');
var isBrowser = require('is-browser');

//create rendering stream from passed options
var renderer = RenderStream({
    //custom rendering function, can be passed instead of options
    render: function (canvas) {
        //see audio-analyser for API
        var fdata = this.getFrequencyData();
        var waveform = this.getTimeData(size);

        //or use web-audio-api AnalyserNode methods here
        this.getFloatFrequencyData(new Float32Array(self.frequencyBinCount));
        this.getFloatTimeDomainData(new Float32Array(self.fftSize));

    //channel number to render, 0 - L, 1 - R, ...
    channel: 0,

    //FPS (node only)
    framesPerSecond: 20,

    //max amount of data to store, number of samples
    bufferSize: 44100,

    //custom canvas (optinal), if you need to render along with other renderer
    canvas: undefined,

    //Analysis options

    //Magnitude diapasone, in dB
    minDecibels: -100,
    maxDecibels: 0,

    // Number of points to grab for fft
    fftSize: 1024,

    // Number of points to plot for fft
    frequencyBinCount: 1024/2,

    // Smoothing, or the priority of the old data over the new data
    smoothingTimeConstant: 0.2

    //...any pcm format options, if required. See pcm-util below.

//Depending on the enviromnent, expose canvas
isBrowser && document.body.appendChild(renderer.canvas);

renderer.on('render', function (canvas, data) {

//If renderer is not piped, it works as a sink, else - as pass-through


audio-analyser — audio analyser stream.
audio-spectrum — render audio spectrum.
audio-spectrogram — render audio spectrogram.
audio-waveform — render audio waveform.
audio-stat — render any kind of audio info: waveform, spectrogram etc.
audio-spiral — render spiral spectrogram, based on audio-render.
drawille-canvas — node/browser canvas class.
pcm-util — utils for work with pcm-streams.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free