Home canvas audio visualizer rotate bars and fix gaps
Reply: 0

canvas audio visualizer rotate bars and fix gaps

Robin
1#
Robin Published in 2017-12-06 11:10:35Z

I'm trying to "rotate" my audio visualizer and fix some other issues. This is the output I have now;

Now, I want the bars to be horizontal, instead of verical in the first place... How can I do this? (Code in at the bottom of the question)

You can see that the bottom part of the bars sometimes are 'open'

The question here is, how to fix that? Because that doesn't look well at all....

And then there is the following, They sometims 'go out of the box'... Like they really jump to the top part of the canvas:

How can I fix this issue?

This is my JavaScript code:

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;

var audio = document.getElementById('audio');
var ctx = new AudioContext();
var analyser = ctx.createAnalyser();
var audioSrc = ctx.createMediaElementSource(audio);
// we have to connect the MediaElementSource with the analyser 
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
// we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
// analyser.fftSize = 64;
// frequencyBinCount tells you how many values you'll receive from the analyser
var frequencyData = new Uint8Array(analyser.frequencyBinCount);

// we're ready to receive some data!
var canvas = document.getElementById('bars1'),
    cwidth = canvas.width,
    cheight = canvas.height - 2,
    meterWidth = 10, //width of the meters in the spectrum
    gap = 0, //gap between meters
    capHeight = 2,
    capStyle = 'transparent',
    meterNum = 800 / (10 + 2), //count of the meters
    capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(300, 0, 0, 0);
gradient.addColorStop(1, '#0f0');
gradient.addColorStop(0.5, '#ff0');
gradient.addColorStop(0, '#f00');
// loop
function renderFrame() {
    var array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(array);
    var step = Math.round(array.length / meterNum); //sample limited data from the total array
    ctx.clearRect(0, 0, cwidth, cheight);
    for (var i = 0; i < meterNum; i++) {
        var value = array[i * step];
        if (capYPositionArray.length < Math.round(meterNum)) {
            capYPositionArray.push(value);
        };
        ctx.fillStyle = capStyle;
        //draw the cap, with transition effect
        if (value < capYPositionArray[i]) {
            //x, y, width, height
            // ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight);
            ctx.fillRect(cheight - (--capYPositionArray[i]), i * 12, capHeight, meterWidth);
        } else {
            // ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
            ctx.fillRect(cheight - value, i * 12, capHeight, meterWidth);
            capYPositionArray[i] = value;
        };
        ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
        ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
        //ctx.fillRect(cheight - value + capHeight, i * 12, cheight, meterWidth); //the meter
    }
    requestAnimationFrame(renderFrame);
}
renderFrame();
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.365298 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO