Artifact
017a25dabd701d0d3f1161a83d3e942468257663472ec76eddd43e276c878e49:
0000: 27 75 73 65 20 73 74 72 69 63 74 27 3b 0a 0a 6c 'use strict';..l
0010: 65 74 20 64 6f 6d 20 3d 20 72 65 71 75 69 72 65 et dom = require
0020: 28 27 2e 2e 2f 75 74 69 6c 2f 64 6f 6d 27 29 3b ('../util/dom');
0030: 0a 6c 65 74 20 49 6e 74 65 72 66 61 63 65 20 3d .let Interface =
0040: 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 63 6f 72 require('../cor
0050: 65 2f 69 6e 74 65 72 66 61 63 65 27 29 3b 0a 0a e/interface');..
0060: 2f 2a 2a 0a 20 2a 20 53 70 65 63 74 72 6f 67 72 /**. * Spectrogr
0070: 61 6d 0a 20 2a 0a 20 2a 20 40 64 65 73 63 72 69 am. *. * @descri
0080: 70 74 69 6f 6e 20 41 75 64 69 6f 20 73 70 65 63 ption Audio spec
0090: 74 72 75 6d 20 76 69 73 75 61 6c 69 7a 61 74 69 trum visualizati
00a0: 6f 6e 0a 20 2a 0a 20 2a 20 40 64 65 6d 6f 20 3c on. *. * @demo <
00b0: 73 70 61 6e 20 6e 65 78 75 73 2d 75 69 3d 22 73 span nexus-ui="s
00c0: 70 65 63 74 72 6f 67 72 61 6d 22 3e 3c 2f 73 70 pectrogram"></sp
00d0: 61 6e 3e 0a 20 2a 0a 20 2a 20 40 65 78 61 6d 70 an>. *. * @examp
00e0: 6c 65 0a 20 2a 20 76 61 72 20 73 70 65 63 74 72 le. * var spectr
00f0: 6f 67 72 61 6d 20 3d 20 6e 65 77 20 4e 65 78 75 ogram = new Nexu
0100: 73 2e 53 70 65 63 74 72 6f 67 72 61 6d 28 27 23 s.Spectrogram('#
0110: 74 61 72 67 65 74 27 29 0a 20 2a 20 73 70 65 63 target'). * spec
0120: 74 72 6f 67 72 61 6d 2e 63 6f 6e 6e 65 63 74 28 trogram.connect(
0130: 6d 79 57 65 62 41 75 64 69 6f 4e 6f 64 65 29 0a myWebAudioNode).
0140: 20 2a 0a 20 2a 20 40 65 78 61 6d 70 6c 65 0a 20 *. * @example.
0150: 2a 20 76 61 72 20 73 70 65 63 74 72 6f 67 72 61 * var spectrogra
0160: 6d 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 53 70 m = new Nexus.Sp
0170: 65 63 74 72 6f 67 72 61 6d 28 27 23 74 61 72 67 ectrogram('#targ
0180: 65 74 27 2c 7b 0a 20 2a 20 20 20 27 73 69 7a 65 et',{. * 'size
0190: 27 3a 20 5b 33 30 30 2c 31 35 30 5d 0a 20 2a 20 ': [300,150]. *
01a0: 7d 29 0a 20 2a 20 73 70 65 63 74 72 6f 67 72 61 }). * spectrogra
01b0: 6d 2e 63 6f 6e 6e 65 63 74 28 6d 79 57 65 62 41 m.connect(myWebA
01c0: 75 64 69 6f 4e 6f 64 65 29 0a 20 2a 0a 20 2a 20 udioNode). *. *
01d0: 40 6f 75 74 70 75 74 0a 20 2a 20 26 6e 62 73 70 @output. *  
01e0: 3b 0a 20 2a 20 4e 6f 20 65 76 65 6e 74 73 0a 20 ;. * No events.
01f0: 2a 0a 20 2a 2f 0a 0a 65 78 70 6f 72 74 20 64 65 *. */..export de
0200: 66 61 75 6c 74 20 63 6c 61 73 73 20 53 70 65 63 fault class Spec
0210: 74 72 6f 67 72 61 6d 20 65 78 74 65 6e 64 73 20 trogram extends
0220: 49 6e 74 65 72 66 61 63 65 20 7b 0a 20 20 63 6f Interface {. co
0230: 6e 73 74 72 75 63 74 6f 72 28 29 20 7b 0a 20 20 nstructor() {.
0240: 20 20 6c 65 74 20 6f 70 74 69 6f 6e 73 20 3d 20 let options =
0250: 5b 5d 3b 0a 0a 20 20 20 20 6c 65 74 20 64 65 66 [];.. let def
0260: 61 75 6c 74 73 20 3d 20 7b 0a 20 20 20 20 20 20 aults = {.
0270: 73 69 7a 65 3a 20 5b 33 30 30 2c 20 31 35 30 5d size: [300, 150]
0280: 0a 20 20 20 20 7d 3b 0a 0a 20 20 20 20 73 75 70 . };.. sup
0290: 65 72 28 61 72 67 75 6d 65 6e 74 73 2c 20 6f 70 er(arguments, op
02a0: 74 69 6f 6e 73 2c 20 64 65 66 61 75 6c 74 73 29 tions, defaults)
02b0: 3b 0a 0a 20 20 20 20 74 68 69 73 2e 61 6e 61 6c ;.. this.anal
02c0: 79 73 65 72 20 3d 20 6e 75 6c 6c 3b 0a 20 20 20 yser = null;.
02d0: 20 74 68 69 73 2e 62 75 66 66 65 72 4c 65 6e 67 this.bufferLeng
02e0: 74 68 20 3d 20 30 3b 0a 20 20 20 20 74 68 69 73 th = 0;. this
02f0: 2e 64 61 74 61 41 72 72 61 79 20 3d 20 6e 75 6c .dataArray = nul
0300: 6c 3b 0a 20 20 20 20 74 68 69 73 2e 61 63 74 69 l;. this.acti
0310: 76 65 20 3d 20 66 61 6c 73 65 3b 0a 20 20 20 20 ve = false;.
0320: 74 68 69 73 2e 73 6f 75 72 63 65 20 3d 20 6e 75 this.source = nu
0330: 6c 6c 3b 0a 0a 20 20 20 20 74 68 69 73 2e 69 6e ll;.. this.in
0340: 69 74 28 29 3b 0a 20 20 7d 0a 0a 20 20 62 75 69 it();. }.. bui
0350: 6c 64 46 72 61 6d 65 28 29 20 7b 0a 20 20 20 20 ldFrame() {.
0360: 74 68 69 73 2e 63 61 6e 76 61 73 20 3d 20 6e 65 this.canvas = ne
0370: 77 20 64 6f 6d 2e 53 6d 61 72 74 43 61 6e 76 61 w dom.SmartCanva
0380: 73 28 74 68 69 73 2e 70 61 72 65 6e 74 29 3b 0a s(this.parent);.
0390: 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 this.element
03a0: 20 3d 20 74 68 69 73 2e 63 61 6e 76 61 73 2e 65 = this.canvas.e
03b0: 6c 65 6d 65 6e 74 3b 0a 20 20 7d 0a 0a 20 20 73 lement;. }.. s
03c0: 69 7a 65 49 6e 74 65 72 66 61 63 65 28 29 20 7b izeInterface() {
03d0: 0a 20 20 20 20 74 68 69 73 2e 63 61 6e 76 61 73 . this.canvas
03e0: 2e 72 65 73 69 7a 65 28 74 68 69 73 2e 77 69 64 .resize(this.wid
03f0: 74 68 2c 20 74 68 69 73 2e 68 65 69 67 68 74 29 th, this.height)
0400: 3b 0a 20 20 7d 0a 0a 20 20 63 6f 6c 6f 72 49 6e ;. }.. colorIn
0410: 74 65 72 66 61 63 65 28 29 20 7b 0a 20 20 20 20 terface() {.
0420: 74 68 69 73 2e 63 61 6e 76 61 73 2e 65 6c 65 6d this.canvas.elem
0430: 65 6e 74 2e 73 74 79 6c 65 2e 62 61 63 6b 67 72 ent.style.backgr
0440: 6f 75 6e 64 43 6f 6c 6f 72 20 3d 20 74 68 69 73 oundColor = this
0450: 2e 63 6f 6c 6f 72 73 2e 66 69 6c 6c 3b 0a 20 20 .colors.fill;.
0460: 7d 0a 0a 20 20 72 65 6e 64 65 72 28 29 20 7b 0a }.. render() {.
0470: 20 20 20 20 69 66 20 28 74 68 69 73 2e 61 63 74 if (this.act
0480: 69 76 65 29 20 7b 0a 20 20 20 20 20 20 72 65 71 ive) {. req
0490: 75 65 73 74 41 6e 69 6d 61 74 69 6f 6e 46 72 61 uestAnimationFra
04a0: 6d 65 28 74 68 69 73 2e 72 65 6e 64 65 72 2e 62 me(this.render.b
04b0: 69 6e 64 28 74 68 69 73 29 29 3b 0a 20 20 20 20 ind(this));.
04c0: 7d 0a 0a 20 20 20 20 69 66 20 28 74 68 69 73 2e }.. if (this.
04d0: 61 6e 61 6c 79 73 65 72 29 20 7b 0a 20 20 20 20 analyser) {.
04e0: 20 20 74 68 69 73 2e 61 6e 61 6c 79 73 65 72 2e this.analyser.
04f0: 67 65 74 42 79 74 65 46 72 65 71 75 65 6e 63 79 getByteFrequency
0500: 44 61 74 61 28 74 68 69 73 2e 64 61 74 61 41 72 Data(this.dataAr
0510: 72 61 79 29 3b 0a 20 20 20 20 7d 0a 0a 20 20 20 ray);. }..
0520: 20 74 68 69 73 2e 63 61 6e 76 61 73 2e 63 6f 6e this.canvas.con
0530: 74 65 78 74 2e 66 69 6c 6c 53 74 79 6c 65 20 3d text.fillStyle =
0540: 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 66 69 6c this.colors.fil
0550: 6c 3b 0a 20 20 20 20 74 68 69 73 2e 63 61 6e 76 l;. this.canv
0560: 61 73 2e 63 6f 6e 74 65 78 74 2e 66 69 6c 6c 52 as.context.fillR
0570: 65 63 74 28 0a 20 20 20 20 20 20 30 2c 0a 20 20 ect(. 0,.
0580: 20 20 20 20 30 2c 0a 20 20 20 20 20 20 74 68 69 0,. thi
0590: 73 2e 63 61 6e 76 61 73 2e 65 6c 65 6d 65 6e 74 s.canvas.element
05a0: 2e 77 69 64 74 68 2c 0a 20 20 20 20 20 20 74 68 .width,. th
05b0: 69 73 2e 63 61 6e 76 61 73 2e 65 6c 65 6d 65 6e is.canvas.elemen
05c0: 74 2e 68 65 69 67 68 74 0a 20 20 20 20 29 3b 0a t.height. );.
05d0: 0a 20 20 20 20 69 66 20 28 74 68 69 73 2e 73 6f . if (this.so
05e0: 75 72 63 65 20 26 26 20 74 68 69 73 2e 64 61 74 urce && this.dat
05f0: 61 41 72 72 61 79 29 20 7b 0a 20 20 20 20 20 20 aArray) {.
0600: 2f 2f 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 74 68 //console.log(th
0610: 69 73 2e 64 61 74 61 41 72 72 61 79 29 3b 0a 0a is.dataArray);..
0620: 20 20 20 20 20 20 6c 65 74 20 62 61 72 57 69 64 let barWid
0630: 74 68 20 3d 20 74 68 69 73 2e 63 61 6e 76 61 73 th = this.canvas
0640: 2e 65 6c 65 6d 65 6e 74 2e 77 69 64 74 68 20 2f .element.width /
0650: 20 74 68 69 73 2e 62 75 66 66 65 72 4c 65 6e 67 this.bufferLeng
0660: 74 68 3b 0a 20 20 20 20 20 20 6c 65 74 20 62 61 th;. let ba
0670: 72 48 65 69 67 68 74 3b 0a 20 20 20 20 20 20 6c rHeight;. l
0680: 65 74 20 78 20 3d 20 30 3b 0a 0a 20 20 20 20 20 et x = 0;..
0690: 20 6c 65 74 20 64 65 66 69 6e 69 74 69 6f 6e 20 let definition
06a0: 3d 20 74 68 69 73 2e 63 61 6e 76 61 73 2e 65 6c = this.canvas.el
06b0: 65 6d 65 6e 74 2e 77 69 64 74 68 20 2f 20 35 30 ement.width / 50
06c0: 3b 0a 0a 20 20 20 20 20 20 66 6f 72 20 28 6c 65 ;.. for (le
06d0: 74 20 69 20 3d 20 30 3b 20 69 20 3c 20 74 68 69 t i = 0; i < thi
06e0: 73 2e 62 75 66 66 65 72 4c 65 6e 67 74 68 3b 20 s.bufferLength;
06f0: 69 20 3d 20 69 20 2b 20 64 65 66 69 6e 69 74 69 i = i + definiti
0700: 6f 6e 29 20 7b 0a 20 20 20 20 20 20 20 20 62 61 on) {. ba
0710: 72 48 65 69 67 68 74 20 3d 20 4d 61 74 68 2e 6d rHeight = Math.m
0720: 61 78 2e 61 70 70 6c 79 28 0a 20 20 20 20 20 20 ax.apply(.
0730: 20 20 20 20 6e 75 6c 6c 2c 0a 20 20 20 20 20 20 null,.
0740: 20 20 20 20 74 68 69 73 2e 64 61 74 61 41 72 72 this.dataArr
0750: 61 79 2e 73 75 62 61 72 72 61 79 28 69 2c 20 69 ay.subarray(i, i
0760: 20 2b 20 64 65 66 69 6e 69 74 69 6f 6e 29 0a 20 + definition).
0770: 20 20 20 20 20 20 20 29 3b 0a 20 20 20 20 20 20 );.
0780: 20 20 62 61 72 48 65 69 67 68 74 20 2f 3d 20 32 barHeight /= 2
0790: 35 35 3b 0a 20 20 20 20 20 20 20 20 62 61 72 48 55;. barH
07a0: 65 69 67 68 74 20 2a 3d 20 74 68 69 73 2e 63 61 eight *= this.ca
07b0: 6e 76 61 73 2e 65 6c 65 6d 65 6e 74 2e 68 65 69 nvas.element.hei
07c0: 67 68 74 3b 0a 0a 20 20 20 20 20 20 20 20 74 68 ght;.. th
07d0: 69 73 2e 63 61 6e 76 61 73 2e 63 6f 6e 74 65 78 is.canvas.contex
07e0: 74 2e 66 69 6c 6c 53 74 79 6c 65 20 3d 20 74 68 t.fillStyle = th
07f0: 69 73 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 6e 74 is.colors.accent
0800: 3b 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e 63 ;. this.c
0810: 61 6e 76 61 73 2e 63 6f 6e 74 65 78 74 2e 66 69 anvas.context.fi
0820: 6c 6c 52 65 63 74 28 0a 20 20 20 20 20 20 20 20 llRect(.
0830: 20 20 78 2c 0a 20 20 20 20 20 20 20 20 20 20 74 x,. t
0840: 68 69 73 2e 63 61 6e 76 61 73 2e 65 6c 65 6d 65 his.canvas.eleme
0850: 6e 74 2e 68 65 69 67 68 74 20 2d 20 62 61 72 48 nt.height - barH
0860: 65 69 67 68 74 2c 0a 20 20 20 20 20 20 20 20 20 eight,.
0870: 20 62 61 72 57 69 64 74 68 20 2a 20 64 65 66 69 barWidth * defi
0880: 6e 69 74 69 6f 6e 2c 0a 20 20 20 20 20 20 20 20 nition,.
0890: 20 20 62 61 72 48 65 69 67 68 74 0a 20 20 20 20 barHeight.
08a0: 20 20 20 20 29 3b 0a 0a 20 20 20 20 20 20 20 20 );..
08b0: 78 20 2b 3d 20 62 61 72 57 69 64 74 68 20 2a 20 x += barWidth *
08c0: 64 65 66 69 6e 69 74 69 6f 6e 3b 0a 20 20 20 20 definition;.
08d0: 20 20 7d 0a 20 20 20 20 7d 0a 20 20 7d 0a 0a 20 }. }. }..
08e0: 20 2f 2a 2a 0a 20 20 45 71 75 69 76 61 6c 65 6e /**. Equivalen
08f0: 74 20 74 6f 20 22 70 61 74 63 68 69 6e 67 20 69 t to "patching i
0900: 6e 22 20 61 6e 20 61 75 64 69 6f 20 6e 6f 64 65 n" an audio node
0910: 20 74 6f 20 76 69 73 75 61 6c 69 7a 65 2e 0a 20 to visualize..
0920: 20 40 70 61 72 61 6d 20 6e 6f 64 65 20 7b 41 75 @param node {Au
0930: 64 69 6f 4e 6f 64 65 7d 20 54 68 65 20 61 75 64 dioNode} The aud
0940: 69 6f 20 6e 6f 64 65 20 74 6f 20 76 69 73 75 61 io node to visua
0950: 6c 69 7a 65 0a 20 20 40 65 78 61 6d 70 6c 65 20 lize. @example
0960: 73 70 65 63 74 72 6f 67 72 61 6d 2e 63 6f 6e 6e spectrogram.conn
0970: 65 63 74 28 20 54 6f 6e 65 2e 4d 61 73 74 65 72 ect( Tone.Master
0980: 20 29 3b 0a 20 20 2a 2f 0a 20 20 63 6f 6e 6e 65 );. */. conne
0990: 63 74 28 6e 6f 64 65 29 20 7b 0a 20 20 20 20 69 ct(node) {. i
09a0: 66 20 28 74 68 69 73 2e 73 6f 75 72 63 65 29 20 f (this.source)
09b0: 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 64 69 73 {. this.dis
09c0: 63 6f 6e 6e 65 63 74 28 29 3b 0a 20 20 20 20 7d connect();. }
09d0: 0a 0a 20 20 20 20 74 68 69 73 2e 61 6e 61 6c 79 .. this.analy
09e0: 73 65 72 20 3d 20 6e 6f 64 65 2e 63 6f 6e 74 65 ser = node.conte
09f0: 78 74 2e 63 72 65 61 74 65 41 6e 61 6c 79 73 65 xt.createAnalyse
0a00: 72 28 29 3b 0a 20 20 20 20 74 68 69 73 2e 61 6e r();. this.an
0a10: 61 6c 79 73 65 72 2e 66 66 74 53 69 7a 65 20 3d alyser.fftSize =
0a20: 20 32 30 34 38 3b 0a 20 20 20 20 74 68 69 73 2e 2048;. this.
0a30: 62 75 66 66 65 72 4c 65 6e 67 74 68 20 3d 20 74 bufferLength = t
0a40: 68 69 73 2e 61 6e 61 6c 79 73 65 72 2e 66 72 65 his.analyser.fre
0a50: 71 75 65 6e 63 79 42 69 6e 43 6f 75 6e 74 3b 0a quencyBinCount;.
0a60: 20 20 20 20 74 68 69 73 2e 64 61 74 61 41 72 72 this.dataArr
0a70: 61 79 20 3d 20 6e 65 77 20 55 69 6e 74 38 41 72 ay = new Uint8Ar
0a80: 72 61 79 28 74 68 69 73 2e 62 75 66 66 65 72 4c ray(this.bufferL
0a90: 65 6e 67 74 68 29 3b 0a 0a 20 20 20 20 74 68 69 ength);.. thi
0aa0: 73 2e 61 63 74 69 76 65 20 3d 20 74 72 75 65 3b s.active = true;
0ab0: 0a 0a 20 20 20 20 74 68 69 73 2e 73 6f 75 72 63 .. this.sourc
0ac0: 65 20 3d 20 6e 6f 64 65 3b 0a 20 20 20 20 74 68 e = node;. th
0ad0: 69 73 2e 73 6f 75 72 63 65 2e 63 6f 6e 6e 65 63 is.source.connec
0ae0: 74 28 74 68 69 73 2e 61 6e 61 6c 79 73 65 72 29 t(this.analyser)
0af0: 3b 0a 0a 20 20 20 20 74 68 69 73 2e 72 65 6e 64 ;.. this.rend
0b00: 65 72 28 29 3b 0a 20 20 7d 0a 0a 20 20 2f 2a 2a er();. }.. /**
0b10: 0a 20 20 53 74 6f 70 20 76 69 73 75 61 6c 69 7a . Stop visualiz
0b20: 69 6e 67 20 74 68 65 20 73 6f 75 72 63 65 20 6e ing the source n
0b30: 6f 64 65 20 61 6e 64 20 64 69 73 63 6f 6e 6e 65 ode and disconne
0b40: 63 74 20 69 74 2e 0a 20 20 2a 2f 0a 20 20 64 69 ct it.. */. di
0b50: 73 63 6f 6e 6e 65 63 74 28 29 20 7b 0a 20 20 20 sconnect() {.
0b60: 20 69 66 20 28 74 68 69 73 2e 73 6f 75 72 63 65 if (this.source
0b70: 29 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 73 ) {. this.s
0b80: 6f 75 72 63 65 2e 64 69 73 63 6f 6e 6e 65 63 74 ource.disconnect
0b90: 28 74 68 69 73 2e 61 6e 61 6c 79 73 65 72 29 3b (this.analyser);
0ba0: 0a 20 20 20 20 7d 0a 0a 20 20 20 20 74 68 69 73 . }.. this
0bb0: 2e 61 6e 61 6c 79 73 65 72 20 3d 20 6e 75 6c 6c .analyser = null
0bc0: 3b 0a 20 20 20 20 74 68 69 73 2e 62 75 66 66 65 ;. this.buffe
0bd0: 72 4c 65 6e 67 74 68 20 3d 20 30 3b 0a 20 20 20 rLength = 0;.
0be0: 20 74 68 69 73 2e 64 61 74 61 41 72 72 61 79 20 this.dataArray
0bf0: 3d 20 6e 75 6c 6c 3b 0a 20 20 20 20 74 68 69 73 = null;. this
0c00: 2e 61 63 74 69 76 65 20 3d 20 66 61 6c 73 65 3b .active = false;
0c10: 0a 20 20 20 20 74 68 69 73 2e 73 6f 75 72 63 65 . this.source
0c20: 20 3d 20 6e 75 6c 6c 3b 0a 20 20 7d 0a 0a 20 20 = null;. }..
0c30: 63 6c 69 63 6b 28 29 20 7b 0a 20 20 20 20 74 68 click() {. th
0c40: 69 73 2e 61 63 74 69 76 65 20 3d 20 21 74 68 69 is.active = !thi
0c50: 73 2e 61 63 74 69 76 65 20 26 26 20 74 68 69 73 s.active && this
0c60: 2e 73 6f 75 72 63 65 3b 0a 20 20 20 20 74 68 69 .source;. thi
0c70: 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20 7d 0a s.render();. }.
0c80: 0a 20 20 63 75 73 74 6f 6d 44 65 73 74 72 6f 79 . customDestroy
0c90: 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 61 63 () {. this.ac
0ca0: 74 69 76 65 20 3d 20 66 61 6c 73 65 3b 0a 20 20 tive = false;.
0cb0: 7d 0a 7d 0a }.}.