Neophobe Plebeian Mumpsimus

    audio-flow

    1.0.6 • Public • Published

    audio-flow

    Interactive navigable audio visualization with two predefined visualizers.

    This project is a remake of studiomikan's project, rewritten on js as a downloadable npm package, with optimizations and added features.

    npm install audio-flow

    BlockVisualizer

    BlockVisualizer

    Visualizer with dynamic adjust based on sceen and css with no performance downscaling caused by resize scaling effects

    // <canvas ref="canvasWrapper" style="width: 100%; height: 90px" />
    
    import { Howl, Howler } from 'howler'
    import { BlockVisualizer, AudioSpectrum } from 'audio-flow'
    
    const options = {
      blockWidth: 2,
      blockHeight: 2,
      marginh: 1,
      marginv: 1,
      colors: ['#b6b6b6'],
      canvas: this.$refs.canvasWrapper,
      playbackColors: ['#e66465', '#c75db5', '#9198e5'],
      playbackGradientStops: [0.3, 0.7]
    }
    const as = new AudioSpectrum(new BlockVisualizer(options))
    const soundHowl = new Howl({
      src: 'audio source',
      autoplay: false
    })
    
    as.setAudio(this.soundHowl, Howler.ctx)
    
    soundHowl?.play()

    Install

    npm i audio-flow

    DownloadsWeekly Downloads

    2

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    12.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • miguelbravo7