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
- Chris Baume, British Broadcasting Corporation
Copyright
Copyright 2014 British Broadcasting Corporation
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent