Nonviolent Pirate Mobster

    vudio

    2.1.1 • Public • Published

    vudio license

    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
    import Vudio from 'vudio'

    using CDN:

    <script src="https://unpkg.com/vudio@2.1.1/umd/vudio.js"></script>

    Use Vudio

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

    Examples

    <canvas width="256px" height="100px" id="canvas"></canvas>
    <audio src="./path/to/audio.mp3" controls id="audio"></audio>
    <script src="path/to/vudio.js"></script>

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

    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/

    Related VSC extension

    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

    Acknowledge

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

    Install

    npm i vudio

    DownloadsWeekly Downloads

    3

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    89.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • alex2huang