Skip to content

Latest commit

 

History

History
49 lines (34 loc) · 2.25 KB

README.md

File metadata and controls

49 lines (34 loc) · 2.25 KB
Raw

viz-demo - 'Browser Audio Visualization'

Slideshow & example code for my BelfastJS December 2017 lightning talk.

Live version is at https://njmcode.github.io/viz-demo/.

Built and tested on Chrome, YMMV on other platforms (yes, I know).

Installation

  • Install Node (including npm).
  • npm install from the directory root.
  • npm run start to build and start the Webpack dev server on the default port (likely 8080). Webpack will watch and re-build on change.
  • Visit localhost:8080 to run the slideshow.
  • Choose your input mechanism from the control panel:
    • Mic - uses your default microphone (requires permission).
    • Music - will play an audio file from the project.

Controls

  • Left and right arrow keys will switch slides during the demo.
  • Browser history can be used to go back/forward between slides.
  • Slide position and time remaining will be persisted to localStorage if available.

About the project

Built with Webpack and Babel to provide the following:

  • ES6 JavaScript module transpilation (via babel-loader)
  • static properties on classes (via transform-class-properties)
  • Object spread operator (via transform-object-rest-spread)
  • CSS Modules (via css-loader)
  • import handling of example/snippet files and assets (via file-loader and raw-loader)

Syntax highlighting courtesy of PrismJS.

The project includes my own lint setup (via babel-eslint). There is no CSS linting so your editor may complain about CSS Modules syntax (@value etc).

This was intended to be a quick two-page demo but really got out of hand. Protip: don't write your own slide handler. (Will spin the /core stuff into standalone modules later.)

TODO

  • Host project on GitHub Pages
  • Improve sizing of items in view
  • Better documentation
  • Add autoprefixer & babel-env config for better cross-browser support
  • Handle errors
  • Profile for perf/GC etc & refactor
  • Bug: timer stays in red alert even if reset (requires refresh)