Javascript audio visualization element based on tiled bitmap images
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
.gitignore
COPYING
README.md
beatmap.js
bower.json
tilecut.sh

README.md

BeatMap

A Javascript audio visualization element based on tiled bitmap images. For a vector-based waveform visualization, see peaks.js.

Installation

BeatMap can be installed using bower

bower install beatmap

or by copying beatmap.js and KineticJS into your working directory.

Examples

Two working examples are supplied:

  • example/example.html implements a single display with three zoom levels and selection functionality
  • example/example-dual.html is as above, but includes a second zoomed display with lines to indicate which part of the recording the zoomed display is showing

Generating tiles

Firstly, generate images from your audio data using something like Vampeyer. The images then need to be cut into tiles and given filenames in the format filename_0.jpg, filename_1.jpg etc. The supplied ImageMagick script tilecut.sh chops an image into equally-spaced tiles and names them appropriately. For example:

./tilecut.sh filename.jpg 240

Usage

In the <head> section of your web page, insert:

<script src="bower_components/kineticjs/kinetic.min.js"></script>
<script src="bower_components/beatmap/beatmap.js"></script>

Add a <div> element where you would like the display to go.

<div id="display"></div>

In a <script> element, declare an array containing the image metadata:

var images = [
  {
    src: 'filenameA',
    width: 960,
    tilewidth: 240,
    format: 'jpg'
  },
  {
    src: 'filenameB',
    width: 4800,
    tilewidth: 240,
    format: 'jpg'
  }
];

Initialize a BeatMap object:

var bm = new BeatMap(document.getElementById("display"),
                     960,           // width of div element in pixels
                     images,        // image metadata array
                     240,           // height of images in pixels
                     60,            // length of recording in seconds
                     0,             // index of image to use (default=0)
                     true);         // display timeline markers (default=true)

and finally create a drawing loop:

window.setInterval("bm.draw(0);",   // drawing function with cursor position in seconds
                   50);             // milliseconds between refreshs

Documentation

To generate the full documentation, use JSDoc:

jsdoc -d=doc beatmap.js

License

See COPYING

Authors

Copyright

Copyright 2014 British Broadcasting Corporation