v2.0 - changes to Wave types

[frankykubo]

v2.0 - changes to Wave types

[foobar404]

I can add an option to Shine in the near future that will offset the bars inwards, Currently it cant be done. The reason the animation gets so large when you change the volume is because none of the animations change based on the size of the canvas right now, v.1 use to do that. That will be reimplemented eventually. If you resize your canvas, you will likely see all of the animation.

[frankykubo]

@foobar404

I can add an option to Shine in the near future that will offset the bars inwards, Currently it cant be done. The reason the animation gets so large when you change the volume is because none of the animations change based on the size of the canvas right now, v.1 use to do that. That will be reimplemented eventually. If you resize your canvas, you will likely see all of the animation.

In v 2.0.3 it looks really good on low volume, but if I increase it, it will still blow the lines to sky. Just a question, I looked into the options after update and you didn't yet implemented this option, did you? I cannot make the canvas bigger because of the web design.

[foobar404]

@frankykubo you must be using the CDN link, I just checked and for some reason its not updating. Ill have to look into a new CDN service, but the NPM package is up-to-date, and the dist/bundle.js file is updated, if you want to just download that and include it in your project for the short-term.

[frankykubo]

@frankykubo you must be using the CDN link, I just checked and for some reason its not updating. Ill have to look into a new CDN service, but the NPM package is up-to-date, and the dist/bundle.js file is updated, if you want to just download that and include it in your project for the short-term.

@foobar404 I am using npm package within Vue project, so it should be working if its implemented. If it has any value, here is my initialization code:

wave.value = new Wave(audio.value, output.value);
audio.value.addEventListener('canplay', async() => {
    wave.value.addAnimation(new wave.value.animations.Shine({
        rounded: true,
        fillColor: '#009BFF',
        lineColor: '#009BFF',
        lineWidth: 1,
        count: 140,
        diameter: 100,
        frequencyBand: 'mids',
    }));
canvas.value.width = 125;
canvas.value.height = 150;
});