Skip to content
/ beatmap Public

Javascript audio visualization element based on tiled bitmap images

License

Notifications You must be signed in to change notification settings

bbc/beatmap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Javascript audio visualization element based on tiled bitmap images

Resources

License

Stars

Watchers

Forks

Packages

No packages published