Build Status

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 can easily be added to any page containing charts.

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?

  • Play an auditory version of the data represented by a Google Chart, JSON fragment or HTML table.

What sort of charts/data does it work with?

  • Google Charts line and bar charts.
  • JSON (the format is detailed in the examples gallery).
  • HTML tables.

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 https://github.com/matatk/audiochart.git 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.

  • Play speed/duration.
  • Support Google Chart Web Component (Polymer) charts.
  • Support C3.js charts.
  • Support SVG charts.
  • Static/Periodic features such as grid/timing beats.
  • Mouse hover "audition" mode (hovering the mouse over a point would sound it).
  • Rendering a visual highlight element for chart APIs that don't provide this (i.eJSON and HTML tables).
  • Multiple plots/data series per chart.
  • Instruments as different sound types.
  • Officially support development on Windows.
  • Create a browser extension to enable AudioChart on charts/tables for sites that don't provide it themselves.
  • Allow modular builds to be created, with only support for data sources relevant to your site/application.
  • Make AudioChart a bower package and explain how it can be easily added to any page that way.