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.
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
- The “Hello, World” AudioChart and Google Charts tutorial demonstrates how to get started.
- AudioChart options reference
- Public API 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.
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).
- Install Node (if you’re a Mac user doing this via Homebrew is recommended:
brew install node).
- Install Grunt globally via
npm -g install grunt-cliin order to be able to run the
gruntcommand in any directory.
- Get AudioChart’s code by using
git clone https://github.com/matatk/audiochart.gitor downloading a ZIP of the latest code.
- Locally install AudioChart’s dependencies by running
npm installin the newly-cloned/extracted
audiochart/directory (the packages will be stored inside
gruntwill 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.