Allows the user to explore charts on web pages using sound and the keyboard rather than, or in conjunction with, visually and with the mouse. The code is developed on GitHub and can easily be added to any page containing charts (or HTML tables or JSON data). A tutorial and examples are available.

AudioChart uses the Web Audio API, which has great support amongst browsers, including Microsoft Edge, though is not (yet) supported by Internet Explorer.

Thanks to The Sonification Handbook for the research behind it and to The Paciello Group for allowing me to share this with you.

Use Cases and Examples

What does it let your users do?

What sort of charts/data does it work with?

The examples gallery covers using AudioChart with Google Charts, JSON and HTML tables.

Tutorial and Documentation


Development is carried out in a test-driven manner. A Gruntfile is provided to run the tests and automate things like linting and minification. The pre-commit hook can be used to ensure only code that passes tests is committed (it does this by running Grunt). You can make a symlink from the .git/hooks/ directory to it and thus it (and the tests) will be run before you are asked for a commit message.

Unit tests can be run in-browser or via the Gruntfile (printing output to the terminal). You can also view the test coverage details. In addition, internal API documentation is available.

Warning: AudioChart is still fairly early in development, so the internal APIs are changing quite fast.

Setting up for development

The build process uses Grunt and therefore also Node. You can get set up for development as follows (most of these instructions require the use of a command line).

  1. Install Node (if you’re a Mac user doing this via Homebrew is recommended: brew install node).
  2. Install Grunt globally via npm -g install grunt-cli in order to be able to run the grunt command in any directory.
  3. Get AudioChart’s code by using git clone or downloading a ZIP of the latest code.
  4. Locally install AudioChart’s dependencies by running npm install in the newly-cloned/extracted audiochart/ directory (the packages will be stored inside node_modules/).
  5. Running grunt will lint the code, run the tests and make a minified production version.

Windows users: this has not yet been extensively tested on Windows, but it doesn’t use anything platform-specific, so should work fine. Please file a bug if you encounter any problems.

Future Work Ideas

Feedback on the following is welcome.