Skip to content

An audio visualizer built using React and the Web Audio API.

License

Notifications You must be signed in to change notification settings

aspyrx/audiovisual

Repository files navigation

audiovisual

npm

An audio visualizer built using React.

CLI usage

  1. Install globally: npm install -g audiovisual
  2. Start the server: audiovisual [flags] [directory]
    • You can specify a directory containing songs to serve.
    • The first time you serve a folder (and any time you want to rescan for updated songs), you'll need to use the -s flag.
      • This will create a file named .audiovisual.json in the root of the folder containing a list of all matched files.
      • The server parses media tags from .{mp3,mp4,m4a} files using jsmediatags
        • This might take a while, so please be patient!
      • If you want to scan recursively into subdirectories, use the -r option.
    • Check below for more options, including customizing file matching expressions.
  3. Navigate to the site (localhost:10102 by default) and enjoy your audiovisual experience!

CLI options


Usage: audiovisual [flags] [directory]

        [directory]: Directory from which to serve audio files.
                If omitted, no audio files will be served.

Flags:
        -h=false        Print this help message and exit.

        -m=[.](mp3|wav|ogg)$    Regular expression to use to match scanned files.

        --mflags=i      Flags to use in regular expression matching.

        -p=10102        Port on which to serve the site.

        -s=false        Scan the files directory for new files.

        -r=false        Whether to scan recursively for files.

        -q=false        Quiet mode; don't output anything to stdout.

Node.js API

  1. Install as dependency: npm install audiovisual
  2. In your code:
const audiovisual = require('audiovisual');

/**
 * Configuration options.
 *
 * @typedef {Object} Options
 *
 * @property {string} [filesDir] - Directory from which to serve audio files.
 * If omitted, no audio files will be served.
 * @property {boolean} [scan] - `true` to scan `filesDir` for updated files.
 * @property {boolean} [recursive] - `true` to scan recursively.
 * @property {RegExp} [filesMatch=/[.](mp3|wav|ogg)$/i] - Regular expression to
 * use to match files during scanning.
 * @property {boolean} [quiet] - `true` for quiet mode; don't output anything to
 * `stdout`.
 */
const options = {};

const app = audiovisual(options);

Development

Several build-related scripts are included that can be run using npm run <script>:

  • doc: generates HTML documentation and places it into doc
  • lint: runs eslint on all source files
  • build: builds the project and places the bundle into dist
  • dist: same as above, excepts does production-level optimizations
  • watch: watches for changes, automatically rebuilding when necessary
  • live: starts a webpack-dev-server and enables hot module replacement. Access the server at http://localhost:8080.

About

An audio visualizer built using React and the Web Audio API.

Resources

License

Stars

Watchers

Forks

Packages

No packages published