@jmosouza/react-wavy/example/example.js

Generates a canvas waveform.

var React = require('react');
var ReactDOM = require('react-dom')
var Waveform = require('./index');
var data = [0, 1, 58, 88, 105, 115, 117, 118, 116, 116, 117, 112, 115, 112, 115, 117, 113, 113, 114, 112, 115, 107, 110, 109, 108, 105, 109, 88, 111, 111, 106, 116, 111, 108, 92, 96, 89, 108, 103, 99, 92, 101, 101, 99, 99, 106, 104, 99, 100, 102, 99, 96, 98, 104, 100, 106, 113, 113, 120, 113, 115, 113, 111, 117, 112, 106, 117, 114, 116, 113, 107, 106, 101, 115, 92, 101, 101, 86, 109, 115, 105, 114, 110, 109, 100, 108, 96, 87, 94, 92, 86, 105, 105, 102, 99, 99, 102, 92, 97, 95, 118, 119, 112, 110, 113, 120, 115, 122, 118, 118, 126, 114, 110, 115, 116, 108, 123, 116, 124, 116, 121, 117, 117, 125, 111, 114, 125, 115, 107, 109, 117, 116, 117, 111, 117, 110, 91, 91, 89, 115, 101, 101, 102, 81, 86, 119, 86, 98, 100, 88, 78, 117, 115, 113, 115, 111, 115, 114, 111, 113, 109, 121, 113, 117, 120, 118, 113, 120, 121, 118, 113, 115, 115, 108, 108, 116, 111, 121, 115, 113, 120, 120, 117, 113, 114, 105, 115, 107, 101, 116, 92, 90, 101, 96, 78, 86, 104, 102, 117, 123, 112, 115, 116, 118, 113, 118, 116, 121, 114, 124, 120, 112, 126, 108, 111, 114, 111, 112, 112, 117, 114, 122, 111, 116, 112, 94, 90, 105, 119, 117, 120, 119, 119, 98, 125, 103, 119, 117, 108, 113, 126, 117, 111, 115, 107, 111, 118, 109, 102, 119, 112, 109, 105, 120, 115, 102, 110, 116, 124, 125, 118, 123, 122, 110, 107, 111, 116, 120, 115, 117, 115, 118, 112, 109, 98, 105, 90, 86, 112, 116, 116, 119, 118, 113, 105, 113, 114, 118, 117, 105, 108, 127, 112, 115, 124, 107, 104, 123, 114, 123, 115, 121, 111, 114, 118, 122, 114, 118, 112, 119, 129, 119, 117, 117, 119, 111, 123, 127, 126, 124, 114, 124, 130, 131, 130, 121, 125, 120, 121, 127, 131, 132, 120, 121, 126, 129, 121, 120, 127, 112, 107, 103, 126, 126, 128, 124, 110, 122, 133, 130, 123, 130, 113, 125, 136, 132, 130, 128, 123, 127, 136, 131, 130, 127, 123, 131, 123, 132, 124, 125, 121, 115, 125, 134, 133, 132, 126, 128, 134, 128, 132, 138, 137, 127, 128, 129, 134, 126, 132, 127, 121, 122, 124, 125, 124, 133, 127, 120, 123, 109, 111, 114, 105, 112, 111, 109, 111, 111, 139, 136, 133, 138, 129, 136, 134, 109, 114, 121, 139, 134, 136, 137, 137, 131, 135, 137, 139, 133, 121, 133, 135, 124, 131, 139, 138, 136, 136, 137, 137, 137, 129, 107, 108, 139, 137, 134, 136, 138, 123, 130, 135, 138, 137, 123, 120, 137, 136, 136, 136, 138, 136, 128, 124, 126, 137, 132, 112, 113, 139, 139, 133, 139, 138, 130, 137, 135, 137, 138, 124, 129, 136, 138, 134, 137, 139, 137, 127, 134, 137, 137, 136, 125, 107, 102, 117, 135, 136, 112, 114, 127, 135, 129, 105, 116, 108, 129, 134, 135, 135, 137, 139, 131, 139, 120, 126, 137, 128, 113, 114, 137, 138, 136, 139, 137, 133, 136, 137, 137, 138, 119, 127, 138, 134, 134, 136, 138, 135, 135, 138, 137, 140, 130, 116, 110, 136, 137, 135, 136, 139, 124, 135, 136, 138, 136, 125, 112, 130, 138, 136, 135, 137, 137, 126, 127, 130, 131, 136, 116, 110, 103, 139, 137, 136, 139, 138, 119, 131, 132, 138, 136, 119, 125, 136, 117, 123, 138, 139, 135, 137, 136, 135, 115, 123, 113, 107, 119, 134, 137, 135, 105, 122, 134, 133, 134, 107, 114, 116, 130, 133, 139, 137, 128, 92, 90, 88, 82, 84, 82, 75, 73, 66, 65, 65, 118, 137, 122, 129, 125, 124, 124, 122, 108, 110, 131, 124, 136, 125, 121, 124, 139, 137, 129, 130, 124, 125, 133, 131, 132, 134, 137, 128, 122, 123, 124, 129, 131, 112, 116, 120, 128, 138, 130, 113, 115, 127, 136, 122, 111, 122, 120, 119, 125, 121, 128, 139, 137, 127, 127, 125, 124, 123, 125, 107, 108, 126, 136, 138, 124, 121, 115, 138, 135, 135, 132, 124, 127, 129, 126, 128, 132, 138, 125, 123, 121, 127, 133, 123, 114, 113, 137, 128, 139, 132, 117, 122, 135, 137, 122, 113, 128, 117, 118, 133, 127, 137, 130, 116, 110, 116, 120, 111, 122, 117, 110, 106, 108, 136, 135, 120, 114, 110, 138, 130, 119, 123, 111, 114, 120, 115, 102, 139, 137, 121, 117, 112, 110, 101, 107, 91, 88, 101, 137, 138, 106, 88, 94, 135, 121, 105, 120, 101, 87, 120, 115, 113, 119, 138, 124, 111, 116, 117, 110, 107, 116, 107, 107, 116, 137, 123, 124, 116, 115, 136, 128, 111, 125, 109, 108, 110, 108, 105, 136, 130, 120, 113, 114, 117, 120, 114, 80, 92, 102, 138, 129, 106, 89, 85, 137, 120, 105, 118, 101, 106, 97, 117, 106, 129, 119, 118, 129, 127, 129, 133, 117, 109, 116, 136, 128, 133, 129, 120, 120, 129, 120, 126, 133, 116, 105, 128, 125, 129, 125, 117, 105, 105, 136, 121, 135, 120, 111, 121, 134, 128, 122, 120, 112, 109, 124, 123, 122, 121, 117, 110, 118, 121, 121, 123, 127, 120, 116, 132, 127, 133, 134, 110, 110, 120, 133, 130, 131, 125, 123, 128, 130, 129, 128, 128, 105, 108, 129, 123, 126, 116, 119, 110, 119, 136, 133, 124, 120, 117, 121, 133, 123, 124, 120, 99, 116, 124, 133, 132, 121, 111, 106, 111, 123, 117, 120, 119, 113, 112, 129, 120, 118, 122, 117, 112, 120, 117, 120, 131, 116, 123, 127, 135, 133, 116, 118, 117, 117, 132, 127, 135, 130, 118, 120, 134, 126, 117, 125, 113, 106, 97, 130, 132, 133, 119, 110, 125, 131, 132, 131, 124, 111, 118, 124, 128, 124, 121, 122, 126, 129, 132, 128, 127, 122, 122, 133, 127, 133, 130, 120, 121, 130, 134, 132, 136, 118, 123, 126, 125, 130, 136, 133, 125, 128, 127, 129, 128, 129, 133, 123, 119, 122, 123, 125, 129, 113, 114, 111, 109, 113, 115, 121, 87, 108, 105, 103, 106, 137, 138, 133, 135, 128, 132, 130, 123, 115, 106, 138, 137, 136, 139, 135, 134, 135, 136, 139, 138, 117, 133, 132, 121, 138, 136, 138, 131, 129, 139, 139, 138, 127, 111, 108, 137, 138, 137, 139, 138, 122, 137, 137, 137, 138, 129, 124, 135, 135, 137, 135, 138, 138, 135, 134, 124, 131, 124, 110, 111, 138, 138, 134, 134, 139, 126, 136, 137, 137, 138, 122, 124, 136, 135, 129, 136, 139, 138, 124, 129, 129, 137, 138, 126, 111, 105, 121, 126, 135, 133, 110, 133, 135, 137, 132, 124, 121, 135, 136, 135, 134, 127, 138, 137, 135, 136, 130, 137, 135, 108, 106, 138, 137, 133, 138, 139, 130, 136, 139, 138, 139, 121, 129, 135, 131, 134, 137, 138, 137, 128, 133, 132, 137, 136, 127, 108, 137, 137, 136, 128, 139, 134, 132, 135, 138, 137, 124, 121, 131, 134, 134, 135, 138, 137, 129, 133, 115, 131, 132, 128, 112, 106, 139, 134, 130, 139, 135, 135, 137, 138, 137, 138, 120, 132, 139, 119, 133, 137, 139, 136, 135, 137, 138, 135, 137, 112, 109, 121, 124, 135, 136, 103, 114, 133, 136, 137, 111, 128, 134, 134, 139, 137, 136, 121, 113, 111, 118, 115, 107, 103, 111, 109, 112, 113, 114, 109, 105, 107, 91, 90, 91, 80, 89, 80, 80, 84, 80, 80, 84, 86, 84, 82, 114, 117, 109, 113, 114, 107, 113, 111, 114, 117, 106, 97, 89, 111, 106, 103, 119, 109, 115, 116, 116, 110, 113, 106, 91, 112, 112, 103, 116, 114, 112, 108, 121, 115, 107, 115, 108, 104, 112, 109, 110, 106, 101, 116, 112, 113, 110, 92, 90, 85, 116, 113, 108, 114, 114, 109, 107, 112, 113, 103, 113, 91, 88, 117, 106, 108, 109, 112, 108, 109, 116, 111, 118, 113, 92, 93, 112, 112, 115, 116, 99, 94, 109, 113, 113, 118, 112, 116, 128, 111, 111, 105, 105, 116, 113, 127, 109, 109, 123, 114, 114, 116, 116, 114, 118, 107, 85, 99, 91, 122, 115, 116, 112, 114, 110, 111, 109, 113, 107, 111, 117, 110, 102, 114, 115, 114, 116, 115, 112, 116, 102, 92, 85, 121, 98, 115, 114, 113, 110, 118, 114, 113, 123, 114, 116, 124, 116, 114, 126, 105, 105, 101, 101, 101, 91, 107, 84, 89, 121, 89, 91, 98, 90, 98, 121, 111, 103, 115, 114, 108, 101, 111, 112, 110, 121, 108, 110, 131, 124, 122, 119, 117, 110, 116, 126, 119, 124, 121, 121, 127, 134, 128, 120, 127, 114, 118, 132, 124, 130, 127, 129, 125, 130, 123, 118, 120, 113, 104, 101, 127, 118, 125, 121, 110, 128, 129, 127, 130, 116, 116, 114, 126, 123, 123, 116, 125, 124, 127, 128, 126, 126, 136, 123, 130, 131, 120, 129, 121, 118, 126, 135, 132, 128, 120, 127, 122, 118, 133, 130, 134, 125, 129, 127, 127, 130, 128, 130, 124, 124, 123, 126, 119, 126, 115, 115, 118, 107, 108, 117, 111, 102, 100, 100, 110, 113, 139, 137, 134, 136, 125, 134, 136, 117, 112, 107, 138, 137, 135, 139, 138, 134, 125, 103, 139, 132, 123, 135, 137, 121, 136, 137, 138, 131, 132, 134, 139, 138, 125, 116, 106, 136, 134, 136, 139, 136, 125, 127, 131, 138, 138, 132, 124, 133, 136, 135, 136, 138, 135, 129, 132, 127, 133, 135, 113, 108, 131, 138, 138, 136, 139, 138, 125, 134, 138, 139, 136, 121, 127, 136, 116, 125, 139, 138, 131, 135, 138, 138, 136, 126, 110, 107, 118, 132, 136, 135, 105, 125, 135, 137, 133, 119, 117, 122, 128, 130, 137, 137, 138, 135, 134, 136, 133, 134, 128, 114, 116, 136, 137, 135, 135, 138, 132, 136, 137, 136, 139, 129, 130, 137, 137, 129, 135, 138, 137, 124, 136, 138, 137, 136, 124, 111, 112, 138, 136, 133, 137, 136, 132, 135, 136, 137, 128, 122, 133, 137, 138, 135, 134, 137, 130, 131, 119, 134, 136, 119, 116, 114, 138, 136, 136, 137, 137, 120, 130, 137, 138, 138, 115, 128, 137, 109, 124, 129, 138, 137, 134, 137, 134, 137, 136, 110, 110, 117, 120, 133, 135, 108, 119, 133, 132, 131, 113, 116, 115, 124, 131, 134, 137, 133, 113, 108, 105, 96, 90, 90, 90, 85, 82, 75, 71, 66, 69, 69, 68, 60, 62, 54, 53, 55, 56, 57, 48, 48, 51, 46, 48, 47, 45, 42, 41, 39, 41, 42, 42, 37, 39, 36, 35, 36, 37, 35, 33, 33, 30, 31, 34, 31, 29, 29, 27, 29, 29, 29, 28, 27, 26, 24, 26, 27]

var position = 0;
var handleClick = function(x) { position = x; };
setInterval(function() {
  position += 3;
  ReactDOM.render(
    <Waveform data={data} color="red" width={900} position={position} onClick={handleClick}/>,
    document.getElementById('waveform')
  );
}, 1000);