├── .gitignore ├── README.md ├── girlfriend.png ├── index.js ├── package.json ├── svg.js └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | girlfriend.mp3 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # draw-wave 2 | 3 | Render a wave form from a web audio buffer to canvas or svg element. 4 | 5 | [![NPM](https://nodei.co/npm/draw-wave.png?downloads=true)](https://npmjs.org/package/draw-wave) 6 | 7 | ## Usage 8 | 9 | #### Render to Canvas 10 | ``` javascript 11 | var drawBuffer = require('draw-wave'); 12 | 13 | drawBuffer.canvas(document.querySelector('.my-canvas'), audiobuffer, '#52F6A4'); 14 | ``` 15 | 16 | #### Generate SVG 17 | ``` javascript 18 | var drawBuffer = require('draw-wave'); 19 | 20 | var waveSVG = drawBuffer.svg(audiobuffer, 500, 300, '#52F6A4'); 21 | document.appendChild(waveSVG); 22 | ``` 23 | This will look produce something like this 24 | ![](./girlfriend.png) 25 | 26 | [here is the song](https://www.youtube.com/watch?v=GWMCSimyD6I) 27 | 28 | [og canvas version](https://github.com/cwilso/Audio-Buffer-Draw) 29 | -------------------------------------------------------------------------------- /girlfriend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meandavejustice/draw-wave/dc0323533df663ded8aa3bf96e9585bd9b786f54/girlfriend.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | canvas: drawBuffer, 3 | svg: require('./svg.js') 4 | }; 5 | 6 | function drawBuffer (canvas, buffer, color) { 7 | var ctx = canvas.getContext('2d'); 8 | var width = canvas.width; 9 | var height = canvas.height; 10 | if (color) { 11 | ctx.fillStyle = color; 12 | } 13 | 14 | var data = buffer.getChannelData( 0 ); 15 | var step = Math.ceil( data.length / width ); 16 | var amp = height / 2; 17 | for(var i=0; i < width; i++){ 18 | var min = 1.0; 19 | var max = -1.0; 20 | for (var j=0; j max) 25 | max = datum; 26 | } 27 | ctx.fillRect(i,(1+min)*amp,1,Math.max(1,(max-min)*amp)); 28 | } 29 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "draw-wave", 3 | "version": "2.0.0", 4 | "description": "draw a waveform to canvas or svg from an audiobuffer", 5 | "main": "index.js", 6 | "scripts": { 7 | "browser-test": "beefy test.js && open http://localhost:9966", 8 | "test": "echo \"Run 'npm run browser-test' for visual test \" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/meandavejustice/draw-wave.git" 13 | }, 14 | "keywords": [ 15 | "audio", 16 | "svg", 17 | "web audio", 18 | "dsp", 19 | "visual", 20 | "canvas", 21 | "browser", 22 | "wave", 23 | "waveform", 24 | "draw" 25 | ], 26 | "author": "meandave", 27 | "license": "MIT", 28 | "bugs": { 29 | "url": "https://github.com/meandavejustice/draw-wave/issues" 30 | }, 31 | "homepage": "https://github.com/meandavejustice/draw-wave", 32 | "dependencies": { 33 | "svg-create-element": "^1.0.0" 34 | }, 35 | "devDependencies": { 36 | "beefy": "^2.1.5" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /svg.js: -------------------------------------------------------------------------------- 1 | var createEl = require('svg-create-element'); 2 | 3 | module.exports = drawBufferSVG; 4 | 5 | function getRect(x, y, width, height, color) { 6 | return createEl('rect', { 7 | x: x, 8 | y: y, 9 | width: width, 10 | height: height, 11 | fill: color 12 | }); 13 | } 14 | 15 | function drawBufferSVG(buffer, width, height, color) { 16 | if (!color) color = '#000'; 17 | 18 | var svgEl = createEl('svg', { 19 | width: width, 20 | height: height 21 | }); 22 | 23 | svgEl.style.display = "block"; 24 | 25 | var g = createEl('g'); 26 | 27 | svgEl.appendChild(g); 28 | 29 | var data = buffer.getChannelData( 0 ); 30 | var step = Math.ceil( data.length / width ); 31 | var amp = height / 2; 32 | for (var i=0; i < width; i++) { 33 | var min = 1.0; 34 | var max = -1.0; 35 | for (var j=0; j max) 40 | max = datum; 41 | } 42 | g.appendChild(getRect(i, (1+min)*amp, 1, Math.max(1,(max-min)*amp), color)); 43 | } 44 | 45 | return svgEl; 46 | } -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | var drawWave = require('./index'); 2 | var canvas = document.createElement('canvas'); 3 | var container = document.createElement('div'); 4 | var AudioSource = require('audiosource'); 5 | var AudioContext = require('audiocontext'); 6 | 7 | canvas.width = 500; 8 | canvas.height = 300; 9 | 10 | document.body.appendChild(container); 11 | container.appendChild(canvas); 12 | 13 | var src = new AudioSource({ 14 | context: new AudioContext(), 15 | src: 'girlfriend.mp3' 16 | }); 17 | 18 | src.load(function() { 19 | var buf = src.buffer; 20 | drawWave.canvas(canvas, buf, '#000'); 21 | container.appendChild(drawWave.svg(buf, 500, 300, '#000')); 22 | }); 23 | --------------------------------------------------------------------------------