vudio
Visualization audio using AudioContext and Canvas
Many visual effects:
Features:
- Support effect and custom styles
- Animation based on Canvas and requestAnimationFrame
Install and use
npm i vudio --save# or install by yarn yarn add vudio
using CDN:
Use Vudio
var vudio = HTMLAudioElement | MediaStream HTMLCanvasElement option;vudio;
Examples
Since AudioContext can NOT use CORS resource, so make sure you have fully control of audio resource
var audioObj = document;var canvasObj = document;var 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; // pause as you wishvudio; // change option reactively.vudio;
Online Demo: https://alex2wong.github.io/vudio/
Related VSC 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
Acknowledge
Inspired and based on https://github.com/margox/vudio.js.git