A Javascript audio visualization element based on tiled bitmap images. For a vector-based waveform visualization, see peaks.js.
BeatMap can be installed using bower
bower install beatmap
or by copying beatmap.js and KineticJS into your working directory.
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
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
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
To generate the full documentation, use JSDoc:
jsdoc -d=doc beatmap.js
See COPYING
- Chris Baume, British Broadcasting Corporation
Copyright 2014 British Broadcasting Corporation