├── .gitignore
├── LICENSE.md
├── README.md
├── demo.js
├── index.html
├── index.js
├── package.json
└── shaders
    ├── basic.frag
    └── basic.vert


/.gitignore:
--------------------------------------------------------------------------------
1 | bundle.js
2 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | This software is released under the MIT license:
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 7 | the Software, and to permit persons to whom the Software is furnished to do so,
 8 | subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # web-audio-analyser [![experimental](http://hughsk.github.io/stability-badges/dist/experimental.svg)](http://github.com/hughsk/stability-badges) #
 2 | 
 3 | A thin wrapper around the Web Audio API that lets you take some audio and get
 4 | its waveform/frequency data in return.
 5 | 
 6 | **Note:** If you are streaming from SoundCloud or a similar API, you may need to set up CORS on your Audio source like so:
 7 | 
 8 | ```js
 9 | var audio = new Audio()
10 | audio.crossOrigin = 'Anonymous'
11 | audio.src = url
12 | ``` 
13 | 
14 | [![web-audio-analyser](https://nodei.co/npm/web-audio-analyser.png?mini=true)](https://nodei.co/npm/web-audio-analyser)
15 | 
16 | ## Usage ##
17 | 
18 | #### `analyser = require('web-audio-analyser')(audio[, ctx][, opts])` ####
19 | 
20 | Takes some form of `audio` as the first argument. This may be one of the
21 | following:
22 | 
23 | * An `<audio>` element.
24 | * A `MediaStream` object created by calling `getUserMedia`.
25 | * Any kind of `AudioSourceNode`.
26 | 
27 | Optionally, you can pass in your own `AudioContext` instance too. **Note** there
28 | may only be one instance of this per page, and if not supplied one will be
29 | created for you.
30 | 
31 | You can also use the following options:
32 | 
33 | * `stereo`: retrieve separate data from the left and right audio channels.
34 | * `audible`: whether or not to play the audio you're analysing. Defaults to
35 |   `true`, but set this to `false` to disable. You can use `analyser.output`
36 |   to pass the resulting output elsewhere.
37 | 
38 | 
39 | #### `analyser.waveform([ui8array][, channel])` ####
40 | 
41 | Copies the audio's current time-domain data into a `Uint8Array`. If you don't
42 | pass your own in, one will be created for you: this will be reused, so it's
43 | safe to call in an animation loop.
44 | 
45 | If you've enabled the `stereo` option, you should pass `channel` as either
46 | `0` or `1` to retrieve output from the left and right channels respectively.
47 | 
48 | #### `analyser.frequencies([ui8array][, channel])` ####
49 | 
50 | Much like `analyser.waveform`, with the exception of copying the audio's
51 | currrent frequency data into a `Uint8Array`.
52 | 


--------------------------------------------------------------------------------
/demo.js:
--------------------------------------------------------------------------------
  1 | var song_url
  2 | 
  3 | var fs           = require('fs')
  4 | var analyse      = require('./')
  5 | var createCamera = require('game-shell-orbit-camera')
  6 | var createBuffer = require('gl-buffer')
  7 | var createShader = require('gl-shader')
  8 | var GLMatrix     = require('gl-matrix')
  9 | var createVAO    = require('gl-vao')
 10 | var glnow        = require('gl-now')
 11 | var mat4         = GLMatrix.mat4
 12 | var shell
 13 | 
 14 | require('soundcloud-badge')({
 15 |     client_id: 'ded451c6d8f9ff1c62f72523f49dab68'
 16 |   , song: 'https://soundcloud.com/moon_music/hydrogen'
 17 |   , dark: false
 18 |   , getFonts: true
 19 | }, function(err, src, json, div) {
 20 |   if (err) throw err
 21 |   song_url = src
 22 | 
 23 |   shell = glnow({ clearColor: [0, 0, 0, 1] })
 24 |   shell.on('gl-render', render)
 25 |   shell.on('gl-init', init)
 26 |   camera = createCamera(shell)
 27 | })
 28 | 
 29 | var lines = new Float32Array(1024 * 3)
 30 | var sides = new Float32Array(1024 * 3)
 31 | var analyser
 32 | var shader
 33 | var mesh
 34 | var gl
 35 | 
 36 | function init() {
 37 |   var audio  = new Audio
 38 |   audio.crossOrigin = 'Anonymous'
 39 |   audio.src = song_url
 40 |   audio.loop = true
 41 |   audio.addEventListener('canplay', function() {
 42 |     console.log('playing!')
 43 |     analyser = analyse(audio, { audible: true, stereo: false })
 44 |     audio.play()
 45 |   })
 46 | 
 47 |   gl = shell.gl
 48 |   mesh = createMesh(gl)
 49 |   shader = createShader(gl
 50 |     , fs.readFileSync(__dirname + '/shaders/basic.vert')
 51 |     , fs.readFileSync(__dirname + '/shaders/basic.frag')
 52 |   )
 53 | }
 54 | 
 55 | var projection = new Float32Array(16)
 56 | var model = new Float32Array(16)
 57 | 
 58 | function render() {
 59 |   if (analyser) {
 60 |     var waveform = analyser.waveform()
 61 |     var size = waveform.length
 62 |     for (var i = 0, n = 0; i < size; i += 1, n += 3) {
 63 |       lines[n  ] = i / size * 2 - 1
 64 |       lines[n+1] = waveform[i] - 128
 65 |       lines[n+2] = 0
 66 |       if (i) {
 67 |         if (i+1 < size) sides[n] = (waveform[i-1] - 128) / 0.175
 68 |         else            sides[n] = (waveform[i] - 128) / 0.175
 69 |       } else {
 70 |         sides[n] = waveform[0] - 128
 71 |       }
 72 |     }
 73 |   }
 74 | 
 75 |   var view = camera.view()
 76 |   mat4.perspective(projection, 0.25*Math.PI, shell.width/shell.height, 0.05, 1000)
 77 |   mat4.identity(model)
 78 | 
 79 |   gl.enable(gl.CULL_FACE)
 80 |   gl.enable(gl.DEPTH_TEST)
 81 | 
 82 |   shader.bind()
 83 |   shader.attributes.position.location = 0
 84 |   shader.attributes.sides.location = 1
 85 | 
 86 |   shader.uniforms.projection = projection
 87 |   shader.uniforms.model = model
 88 |   shader.uniforms.view = view
 89 | 
 90 |   mesh.buffer.update(lines)
 91 |   mesh.sides.update(sides)
 92 |   mesh.vao.bind()
 93 |   gl.lineWidth(4)
 94 |   gl.drawArrays(gl.LINE_STRIP, 0, mesh.length)
 95 |   mesh.vao.unbind()
 96 | }
 97 | 
 98 | function createMesh(gl) {
 99 |   var vertBuffer = createBuffer(gl, gl.ARRAY_BUFFER, lines)
100 |   var sideBuffer = createBuffer(gl, gl.ARRAY_BUFFER, sides)
101 |   var vao = createVAO(gl, null, [{
102 |     buffer: vertBuffer
103 |     , type: gl.FLOAT
104 |     , size: 3
105 |     , offset: 0
106 |     , stride: 0
107 |     , normalized: false
108 |   }, {
109 |     buffer: sideBuffer
110 |     , type: gl.FLOAT
111 |     , size: 3
112 |     , offset: 0
113 |     , stride: 0
114 |     , normalized: false
115 |   }])
116 | 
117 |   return {
118 |       vao: vao
119 |     , length: vertBuffer.length / 3
120 |     , buffer: vertBuffer
121 |     , sides: sideBuffer
122 |   }
123 | }
124 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>web-audio-analyser</title>
 5 |   </head>
 6 |   <body>
 7 |     <script type="text/javascript" src="bundle.js"></script>
 8 |   </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var AudioContext = window.AudioContext || window.webkitAudioContext
 2 | 
 3 | module.exports = WebAudioAnalyser
 4 | 
 5 | function WebAudioAnalyser(audio, ctx, opts) {
 6 |   if (!(this instanceof WebAudioAnalyser)) return new WebAudioAnalyser(audio, ctx, opts)
 7 |   if (!(ctx instanceof AudioContext)) (opts = ctx), (ctx = null)
 8 | 
 9 |   opts = opts || {}
10 |   this.ctx = ctx = ctx || new AudioContext
11 | 
12 |   if (!(audio instanceof AudioNode)) {
13 |     audio = (audio instanceof Audio || audio instanceof HTMLAudioElement)
14 |       ? ctx.createMediaElementSource(audio)
15 |       : ctx.createMediaStreamSource(audio)
16 |   }
17 | 
18 |   this.analyser = ctx.createAnalyser()
19 |   this.stereo   = !!opts.stereo
20 |   this.audible  = opts.audible !== false
21 |   this.wavedata = null
22 |   this.freqdata = null
23 |   this.splitter = null
24 |   this.merger   = null
25 |   this.source   = audio
26 | 
27 |   if (!this.stereo) {
28 |     this.output = this.source
29 |     this.source.connect(this.analyser)
30 |     if (this.audible)
31 |       this.analyser.connect(ctx.destination)
32 |   } else {
33 |     this.analyser = [this.analyser]
34 |     this.analyser.push(ctx.createAnalyser())
35 | 
36 |     this.splitter = ctx.createChannelSplitter(2)
37 |     this.merger   = ctx.createChannelMerger(2)
38 |     this.output   = this.merger
39 | 
40 |     this.source.connect(this.splitter)
41 | 
42 |     for (var i = 0; i < 2; i++) {
43 |       this.splitter.connect(this.analyser[i], i, 0)
44 |       this.analyser[i].connect(this.merger, 0, i)
45 |     }
46 | 
47 |     if (this.audible)
48 |       this.merger.connect(ctx.destination)
49 |   }
50 | }
51 | 
52 | WebAudioAnalyser.prototype.waveform = function(output, channel) {
53 |   if (!output) output = this.wavedata || (
54 |     this.wavedata = new Uint8Array((this.analyser[0] || this.analyser).frequencyBinCount)
55 |   )
56 | 
57 |   var analyser = this.stereo
58 |     ? this.analyser[channel || 0]
59 |     : this.analyser
60 | 
61 |   analyser.getByteTimeDomainData(output)
62 | 
63 |   return output
64 | }
65 | 
66 | WebAudioAnalyser.prototype.frequencies = function(output, channel) {
67 |   if (!output) output = this.freqdata || (
68 |     this.freqdata = new Uint8Array((this.analyser[0] || this.analyser).frequencyBinCount)
69 |   )
70 | 
71 |   var analyser = this.stereo
72 |     ? this.analyser[channel || 0]
73 |     : this.analyser
74 | 
75 |   analyser.getByteFrequencyData(output)
76 | 
77 |   return output
78 | }
79 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web-audio-analyser",
 3 |   "version": "2.0.1",
 4 |   "description": "A thin wrapper around the Web Audio API that lets you take some audio and get its waveform/frequency data in return.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "npm start",
 8 |     "start": "beefy demo.js:bundle.js --live -- -t brfs",
 9 |     "prepublish": "browserify -t brfs demo.js > bundle.js"
10 |   },
11 |   "author": "Hugh Kennedy <hughskennedy@gmail.com> (http://hughskennedy.com/)",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "beefy": "^2.1.5",
15 |     "brfs": "~0.0.8",
16 |     "game-shell-orbit-camera": "0.0.0",
17 |     "gl-buffer": "~0.1.1",
18 |     "gl-matrix": "~2.0.0",
19 |     "gl-now": "0.0.4",
20 |     "gl-shader": "0.0.6",
21 |     "gl-vao": "0.0.2",
22 |     "soundcloud-badge": "0.0.0"
23 |   },
24 |   "dependencies": {},
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "git://github.com/hughsk/web-audio-analyser.git"
28 |   },
29 |   "keywords": [
30 |     "audio",
31 |     "web",
32 |     "api",
33 |     "browserify",
34 |     "analysis",
35 |     "fft",
36 |     "waveform",
37 |     "reactive"
38 |   ],
39 |   "bugs": {
40 |     "url": "https://github.com/hughsk/web-audio-analyser/issues"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/shaders/basic.frag:
--------------------------------------------------------------------------------
1 | precision highp float;
2 | 
3 | varying float tSide;
4 | 
5 | void main() {
6 |   gl_FragColor = vec4(1.0 - tSide * 0.5, 1.0, 1.0 - tSide * 0.4, 1.0);
7 | }
8 | 


--------------------------------------------------------------------------------
/shaders/basic.vert:
--------------------------------------------------------------------------------
 1 | precision highp float;
 2 | 
 3 | attribute vec3 position;
 4 | attribute vec3 sides;
 5 | 
 6 | varying float tSide;
 7 | 
 8 | uniform mat4 projection;
 9 | uniform mat4 model;
10 | uniform mat4 view;
11 | 
12 | void main() {
13 |   tSide = abs(sides.x - position.y) * 0.01;
14 |   gl_Position = projection * view * model * vec4(position.x * 1.5, position.y * 0.0015, position.z, 1.0);
15 | }
16 | 


--------------------------------------------------------------------------------