vudio

$3

Many visual effects:

!多種視覺效果

------
#### Features：
- Support effect and custom styles
- Animation based on Canvas and requestAnimationFrame

#### Install and use

``bash
npm i vudio --save

or install by yarn

yarn add vudio
`
`javascript
import Vudio from 'vudio'
`
using CDN:
`html

`
Use Vudio
`javascript
var vudio = new Vudio(HTMLAudioElement | MediaStream, HTMLCanvasElement, [option]);
vudio.dance();
`

#### Examples
`html



`
Since AudioContext can NOT use CORS resource, so make sure you have fully control of audio resource

`javascript
var audioObj = document.querySelector('#audio');
var canvasObj = document.querySelector('#canvas');
var vudio = new Vudio(audioObj, canvasObj, {
effect : 'waveform', // waveform, circlewave, circlebar, lighting (4 visual effect)
accuracy : 128, // number of freqBar, must be pow of 2.
width : 256, // canvas width
height : 100, // canvas height
waveform : {
maxHeight : 80, // max waveform bar height
minHeight : 1, // min waveform bar height
spacing: 1, // space between bars
color : '#f00', // string | [string] color or waveform bars
shadowBlur : 0, // blur of bars
shadowColor : '#f00',
fadeSide : true, // fading tail
horizontalAlign : 'center', // left/center/right, only effective in 'waveform'/'lighting'
verticalAlign: 'middle' // top/middle/bottom, only effective in 'waveform'/'lighting'
}
});

vudio.dance();

// pause as you wish
vudio.pause();

// change option reactively.
vudio.setOption({
waveform : {
color : '#06f',
verticalAlign: 'bottom'
}
});
``

Online Demo: https://alex2wong.github.io/vudio/

$3

!vscode extension

Listen netease music and watch visualization in VSCode :)
Install by vsix file
https://github.com/alex2wong/vsc-netease-music/releases

related issue:
https://github.com/nondanee/vsc-netease-music/issues/63

$3

Inspired and based on https://github.com/margox/vudio.js.git