Comments

[Erudition]

This is awesome! What is the cause of all of the "holes" in the waterfall output? Is that a rendering artifact, or some actual property of the music?

[mfcc64]

That's because of interference between frequencies.

[brucerothwell]

Awesome work on this! I have been searching for something nice like this that I can incorporate into a website I am developing, for live audio streaming. All that I have found are either ones that will play an audio stream from a URL, but the animation does not work, or the animation works, but only seems to play a file loaded from the local computer. Do you know of a tweek that would make this work with an audio stream URL? (this is the URL: http://de1.internet-radio.com:8106/stream )

[mfcc64]

Probably, this is CORS issue. Maybe, try it with audio stream from your website instead of external website.

Thank's.

[brucerothwell]

Thx for responding! If you mean running your code on the server the stream originates from, that is not possible — it is a streaming server I do not have access to.

What is CORS?

[mfcc64]

CORS: cross-origin resource sharing Wikipedia: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

https://stackoverflow.com/questions/27429123/html5-audio-web-audio-api-cors-and-firefox https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy

[brucerothwell]

Thx again.

With another bit of code, I’ve been able to get audio and a visualizer working, but is so basic, not looking anything nice like yours.

Part of what I did was add the audio.crossdomain =“anonymous”; line.

What I’d really like to donis get your visualizer working with my ausio stream.

Also, is there an option for not showing the musical scale, and just show the waveform?

[mfcc64]

Probably, you want to use showcqtbar.js from scratch. Here is an example:

// include showcqtbar.js
// prepare audio_ctx, canvas, canvas_ctx, analyser_l, analyser_r
var bar_v = 17;
var sono_v = 17;
var cqt = new ShowCQTBar(audio_ctx.sampleRate, canvas.width, canvas.height - 4, /* add 4 pixels axis */
                         bar_v, sono_v, 1);

analyser_l.fftSize = cqt.fft_size;
analyser_r.fftSize = cqt.fft_size;

var buffer_l = cqt.get_input_array(0);
var buffer_r = cqt.get_input_array(1);
var line_buffer = cqt.get_output_array();
var canvas_buffer = canvas_ctx.createImageData(canvas.width, canvas.height);

function draw() {
    requestAnimationFrame(draw);
    analyser_l.getFloatTimeDomainData(buffer_l);
    analyser_r.getFloatTimeDomainData(buffer_r);
    cqt.calc();

    for (var y = 0; y < canvas.height; y++) {
        cqt.render_line(y, 255 /* opaque */);
        canvas_buffer.data.set(line_buffer, 4 * canvas.width * y);
    }

    canvas_ctx.putImageData(canvas_buffer, 0, 0);
}

requestAnimationFrame(draw);