From 90984c02aeac294f97fa7bf114f0ee0476258e32 Mon Sep 17 00:00:00 2001 From: Anam Ahmed Date: Mon, 22 Jun 2020 02:41:08 +0600 Subject: [PATCH] colors change --- README.md | 16 +++++++++++----- dist/index.js | 2 +- dist/index.js.map | 2 +- package.json | 2 +- tools/canvas_tools.js | 12 +++++++----- 5 files changed, 21 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 6d7d84b..2b05dc0 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ yarn add webaudio-oscilloscope Or you can link this file in your HTML: ```html - + ``` If you include the script in your HTML file, you'll get a global object called `_osc`. You can acces the functionalities like: `_osc.Oscilloscope`. @@ -70,7 +70,7 @@ document.querySelector(".start").addEventListener("click",startOsc); ```js import {Oscilloscope} from "webaudio-oscilloscope"; - new Oscilloscope(AudioContext, AudioSource, CanvasElement, AudioDestination, [fft, init,primer]) + new Oscilloscope(AudioContext, AudioSource, CanvasElement, AudioDestination, [fft, init,primer]); ``` Argument | Required | Default | Description | @@ -115,19 +115,23 @@ The Oscilloscope can be customized by using, the `init` and `primer` arguments i You can create a function like the one below and pass it in the constructor. In fact this is the default init function. You can do stuff like setting the default fill and stroke colors,setting line width etc. For example, to set the fill and stroke style of the canvas: ```js -function init(context, width, height){ +function customInit(context, width, height){ ctx.fillStyle = "#000"; ctx.strokeStyle = "#0f0"; } +// Then Initiate the Oscilloscope like this: +new Oscilloscope(AudioContext, AudioSource, CanvasElement, AudioDestination, 2042, customInit); ``` #### primer() [Function]: This function gets called before every render. If you need to draw anything (a graph or maybe some values), you can do it here. For example: the default primer function fills the background with the default fill color(black): ```js -function primer(ctx, width, height){ +function customPrimer(ctx, width, height){ ctx.fillRect(0,0,width,height); } +// Then Initiate the Oscilloscope like this: +new Oscilloscope(AudioContext, AudioSource, CanvasElement, AudioDestination, 2042, null, customPrimer); ``` For example: If you want to render your oscilloscope on a graph, try this primer function: ```js @@ -147,11 +151,13 @@ function fancyGraph(ctx,width,height){ ctx.stroke(); ctx.strokeStyle = backstrokeStyle; } +// Then Initiate the Oscilloscope like this: +new Oscilloscope(AudioContext, AudioSource, CanvasElement, AudioDestination, 2042, null, fancyGraph); ``` both The function exacly gets 3 arguments, `context` (The canvas rendering context), `width` (the canvas width), `height` (the canvas height). You don't need to worry where these values will come from, just assume that they will be available in the function context. ## Plugins -You can write plugin for this using the `init` and `primer` functions. +You can write plugin for this using the `init` and `primer` functions. ## Contributing: This package is released under the MIT license Feel free to contribute. diff --git a/dist/index.js b/dist/index.js index cbef04c..dbd49d0 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,5 +1,5 @@ parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c3&&void 0!==arguments[3]?arguments[3]:null,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:2048,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,c=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null;this.actx=e,this.FFT=s,this.cvs=n,this.init=o||t._initCvs,this.primer=c||t._primer,this.paused=!1,this.anl=this.actx.createAnalyser(),this.ctx=e,this.src=i,this.dest=a,this.anl.fftSize=this.FFT,this.src.connect(this.anl),this.dest&&this.anl.connect(this.dest);var u=this.cvs,l=u.width,d=void 0===l?300:l,h=u.height,v=void 0===h?150:h;this.WIDTH=d,this.HEIGHT=v,this.u8ar=new Uint8Array(this.FFT),this.cctx=this.cvs.getContext("2d"),this.init(this.cctx,this.WIDTH,this.HEIGHT),this.draw=function(){r.paused||requestAnimationFrame(r.draw),r.cctx.clearRect(0,0,r.WIDTH,r.HEIGHT),r.primer(r.cctx,r.WIDTH,r.HEIGHT),r.anl.getByteTimeDomainData(r.u8ar),t._drawRawOsc(r.cctx,r.u8ar,r.WIDTH,r.HEIGHT)},this.start=function(){r.paused=!1,r.draw()},this.pause=function(){r.paused=!0},this.reset=function(){r.paused=!0,requestAnimationFrame(function(){r.u8ar=new Uint8Array(r.FFT).fill(0),r.cctx.clearRect(0,0,r.WIDTH,r.HEIGHT),r.primer(r.cctx,r.WIDTH,r.HEIGHT),t._drawRawOsc(r.cctx,r.u8ar,r.WIDTH,r.HEIGHT)})}}function r(){return new(window.AudioContext||window.webkitAudioContext)}function a(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2048,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,c=r(),u=c.createMediaStreamSource(t);return new n(c,u,e,i,a,s,o)}function s(t){return new Promise(function(e){navigator&&navigator.mediaDevices&&navigator.mediaDevices.getUserMedia?navigator.mediaDevices.getUserMedia(t).then(e).catch(function(){return e(null)}):navigator.getUserMedia?navigator.getUserMedia(t,e,function(){return e(null)}):navigator.webkitGetUserMedia?navigator.webkitGetUserMedia(t,e,function(){return e(null)}):navigator.mozGetUserMedia?navigator.mozGetUserMedia(t,e,function(){return e(null)}):e(null)})} },{"./tools/canvas_tools":"zttq"}]},{},["Focm"], "_osc") diff --git a/dist/index.js.map b/dist/index.js.map index ef32eb0..0ea1255 100644 --- a/dist/index.js.map +++ b/dist/index.js.map @@ -1 +1 @@ -{"version":3,"sources":["tools/canvas_tools.js","index.js"],"names":["_initCvs","ctx","width","height","fillStyle","strokeStyle","_primer","fillRect","backupStroke","beginPath","moveTo","lineTo","stroke","_drawRawOsc","data","i","length","x","y","Oscilloscope","audioContext","audioSource","canvasElement","audioDest","analyzerFFT","canvasInitFunction","drawingPrimerFunction","actx","FFT","cvs","init","_ct","primer","paused","anl","createAnalyser","src","dest","fftSize","connect","WIDTH","HEIGHT","u8ar","Uint8Array","cctx","getContext","draw","requestAnimationFrame","clearRect","getByteTimeDomainData","start","pause","reset","fill","createAudioContext","window","AudioContext","webkitAudioContext","MediaStreamOscilloscope","mediaStream","createMediaStreamSource","getUserMedia","constraints","Promise","resolve","navigator","mediaDevices","then","catch","webkitGetUserMedia","mozGetUserMedia"],"mappings":"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","file":"index.js","sourceRoot":"..","sourcesContent":["function _initCvs(ctx, width, height){\n ctx.fillStyle = \"#000\";\n ctx.strokeStyle = \"#0f0\";\n}\nfunction _primer(ctx, width, height){\n ctx.fillRect(0,0,width,height);\n let backupStroke = ctx.strokeStyle;\n ctx.strokeStyle = \"#777\";\n ctx.beginPath();\n ctx.moveTo(0, height / 2);\n ctx.lineTo(width, height / 2);\n ctx.stroke();\n ctx.strokeStyle = backupStroke;\n}\nfunction _drawRawOsc(ctx,data,width,height){\n ctx.beginPath();\n for(let i=0; i < data.length; i++){\n let x = i * (width * 1.0 / data.length); // need to fix x\n let v = data[i] / 128.0;\n let y = v * height / 2;\n if(i === 0) ctx.moveTo(x,y);\n else ctx.lineTo(x,y);\n }\n ctx.stroke();\n}\nexport {\n _initCvs,\n _primer,\n _drawRawOsc\n}","\"use strict\";\nimport * as _ct from \"./tools/canvas_tools\";\nfunction Oscilloscope(audioContext, audioSource, canvasElement, audioDest = null, analyzerFFT = 2048, canvasInitFunction = null, drawingPrimerFunction = null){\n this.actx = audioContext;\n this.FFT = analyzerFFT;\n this.cvs = canvasElement;\n this.init = canvasInitFunction || _ct._initCvs;\n this.primer = drawingPrimerFunction || _ct._primer;\n this.paused = false;\n this.anl = this.actx.createAnalyser();\n this.ctx = audioContext;\n this.src = audioSource;\n this.dest = audioDest;\n // Configure Analyzer\n this.anl.fftSize = this.FFT;\n this.src.connect(this.anl);\n if(this.dest) this.anl.connect(this.dest);\n // Set up Canvas\n let {width = 300, height = 150} = this.cvs;\n this.WIDTH = width;\n this.HEIGHT = height;\n this.u8ar = new Uint8Array(this.FFT);\n this.cctx = this.cvs.getContext(\"2d\");\n this.init(this.cctx,this.WIDTH,this.HEIGHT);\n this.draw = () =>{\n if(!this.paused) requestAnimationFrame(this.draw);\n this.cctx.clearRect(0 , 0, this.WIDTH, this.HEIGHT);\n this.primer(this.cctx, this.WIDTH, this.HEIGHT);\n this.anl.getByteTimeDomainData(this.u8ar);\n _ct._drawRawOsc(this.cctx, this.u8ar, this.WIDTH, this.HEIGHT);\n }\n this.start = () => {\n this.paused = false;\n this.draw();\n }\n this.pause = () =>{\n this.paused = true;\n }\n this.reset = () =>{\n this.paused = true;\n requestAnimationFrame(()=>{\n this.u8ar = new Uint8Array(this.FFT).fill(0);\n this.cctx.clearRect(0 , 0, this.WIDTH, this.HEIGHT);\n this.primer(this.cctx, this.WIDTH, this.HEIGHT);\n _ct._drawRawOsc(this.cctx, this.u8ar, this.WIDTH, this.HEIGHT);\n });\n }\n}\n\nfunction createAudioContext(){\n return new (window.AudioContext || window.webkitAudioContext)();\n}\n\nfunction MediaStreamOscilloscope(mediaStream, canvasElement, audioDest = null, analyzerFFT = 2048, canvasInitFunction = null, drawingPrimerFunction = null){\n let ctx = createAudioContext();\n let src = ctx.createMediaStreamSource(mediaStream);\n return new Oscilloscope(ctx, src, canvasElement, audioDest, analyzerFFT, canvasInitFunction, drawingPrimerFunction);\n}\n\nfunction getUserMedia(constraints){\n return new Promise((resolve)=>{\n if(navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia){\n navigator.mediaDevices.getUserMedia(constraints).then(resolve).catch(()=>resolve(null));\n }\n else if(navigator.getUserMedia){\n navigator.getUserMedia(constraints, resolve, ()=>resolve(null));\n }\n else if(navigator.webkitGetUserMedia){\n navigator.webkitGetUserMedia(constraints, resolve, ()=>resolve(null));\n }\n else if(navigator.mozGetUserMedia){\n navigator.mozGetUserMedia(constraints, resolve, ()=>resolve(null));\n }\n else resolve(null);\n });\n}\nexport {\n Oscilloscope,\n MediaStreamOscilloscope,\n createAudioContext,\n getUserMedia\n}"]} \ No newline at end of file +{"version":3,"sources":["tools/canvas_tools.js","index.js"],"names":["DEFAULT_FILL","DEFAULT_STROKE","HLINE_COLOR","_initCvs","ctx","width","height","fillStyle","strokeStyle","_primer","fillRect","beginPath","moveTo","lineTo","stroke","_drawRawOsc","data","i","length","x","y","Oscilloscope","audioContext","audioSource","canvasElement","audioDest","analyzerFFT","canvasInitFunction","drawingPrimerFunction","actx","FFT","cvs","init","_ct","primer","paused","anl","createAnalyser","src","dest","fftSize","connect","WIDTH","HEIGHT","u8ar","Uint8Array","cctx","getContext","draw","requestAnimationFrame","clearRect","getByteTimeDomainData","start","pause","reset","fill","createAudioContext","window","AudioContext","webkitAudioContext","MediaStreamOscilloscope","mediaStream","createMediaStreamSource","getUserMedia","constraints","Promise","resolve","navigator","mediaDevices","then","catch","webkitGetUserMedia","mozGetUserMedia"],"mappings":"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","file":"index.js","sourceRoot":"..","sourcesContent":["const DEFAULT_FILL = \"#2d3436\";\nconst DEFAULT_STROKE = \"#4cd137\"; \nconst HLINE_COLOR = \"#7f8c8d\";\nfunction _initCvs(ctx, width, height){\n ctx.fillStyle = DEFAULT_FILL;\n ctx.strokeStyle = DEFAULT_STROKE;\n}\nfunction _primer(ctx, width, height){\n ctx.fillRect(0,0,width,height);\n ctx.strokeStyle = HLINE_COLOR;\n ctx.beginPath();\n ctx.moveTo(0, height / 2);\n ctx.lineTo(width, height / 2);\n ctx.stroke();\n ctx.strokeStyle = DEFAULT_STROKE;\n}\nfunction _drawRawOsc(ctx,data,width,height){\n ctx.beginPath();\n for(let i=0; i < data.length; i++){\n let x = i * (width * 1.0 / data.length); // need to fix x\n let v = data[i] / 128.0;\n let y = v * height / 2;\n if(i === 0) ctx.moveTo(x,y);\n else ctx.lineTo(x,y);\n }\n ctx.stroke();\n}\nexport {\n _initCvs,\n _primer,\n _drawRawOsc\n}","\"use strict\";\nimport * as _ct from \"./tools/canvas_tools\";\nfunction Oscilloscope(audioContext, audioSource, canvasElement, audioDest = null, analyzerFFT = 2048, canvasInitFunction = null, drawingPrimerFunction = null){\n this.actx = audioContext;\n this.FFT = analyzerFFT;\n this.cvs = canvasElement;\n this.init = canvasInitFunction || _ct._initCvs;\n this.primer = drawingPrimerFunction || _ct._primer;\n this.paused = false;\n this.anl = this.actx.createAnalyser();\n this.ctx = audioContext;\n this.src = audioSource;\n this.dest = audioDest;\n // Configure Analyzer\n this.anl.fftSize = this.FFT;\n this.src.connect(this.anl);\n if(this.dest) this.anl.connect(this.dest);\n // Set up Canvas\n let {width = 300, height = 150} = this.cvs;\n this.WIDTH = width;\n this.HEIGHT = height;\n this.u8ar = new Uint8Array(this.FFT);\n this.cctx = this.cvs.getContext(\"2d\");\n this.init(this.cctx,this.WIDTH,this.HEIGHT);\n this.draw = () =>{\n if(!this.paused) requestAnimationFrame(this.draw);\n this.cctx.clearRect(0 , 0, this.WIDTH, this.HEIGHT);\n this.primer(this.cctx, this.WIDTH, this.HEIGHT);\n this.anl.getByteTimeDomainData(this.u8ar);\n _ct._drawRawOsc(this.cctx, this.u8ar, this.WIDTH, this.HEIGHT);\n }\n this.start = () => {\n this.paused = false;\n this.draw();\n }\n this.pause = () =>{\n this.paused = true;\n }\n this.reset = () =>{\n this.paused = true;\n requestAnimationFrame(()=>{\n this.u8ar = new Uint8Array(this.FFT).fill(0);\n this.cctx.clearRect(0 , 0, this.WIDTH, this.HEIGHT);\n this.primer(this.cctx, this.WIDTH, this.HEIGHT);\n _ct._drawRawOsc(this.cctx, this.u8ar, this.WIDTH, this.HEIGHT);\n });\n }\n}\n\nfunction createAudioContext(){\n return new (window.AudioContext || window.webkitAudioContext)();\n}\n\nfunction MediaStreamOscilloscope(mediaStream, canvasElement, audioDest = null, analyzerFFT = 2048, canvasInitFunction = null, drawingPrimerFunction = null){\n let ctx = createAudioContext();\n let src = ctx.createMediaStreamSource(mediaStream);\n return new Oscilloscope(ctx, src, canvasElement, audioDest, analyzerFFT, canvasInitFunction, drawingPrimerFunction);\n}\n\nfunction getUserMedia(constraints){\n return new Promise((resolve)=>{\n if(navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia){\n navigator.mediaDevices.getUserMedia(constraints).then(resolve).catch(()=>resolve(null));\n }\n else if(navigator.getUserMedia){\n navigator.getUserMedia(constraints, resolve, ()=>resolve(null));\n }\n else if(navigator.webkitGetUserMedia){\n navigator.webkitGetUserMedia(constraints, resolve, ()=>resolve(null));\n }\n else if(navigator.mozGetUserMedia){\n navigator.mozGetUserMedia(constraints, resolve, ()=>resolve(null));\n }\n else resolve(null);\n });\n}\nexport {\n Oscilloscope,\n MediaStreamOscilloscope,\n createAudioContext,\n getUserMedia\n}"]} \ No newline at end of file diff --git a/package.json b/package.json index ef08d88..ed17a4e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "webaudio-oscilloscope", - "version": "3.1.4", + "version": "3.2.0", "keywords": [ "webaudio", "oscilloscope", diff --git a/tools/canvas_tools.js b/tools/canvas_tools.js index acab142..d4e549f 100644 --- a/tools/canvas_tools.js +++ b/tools/canvas_tools.js @@ -1,16 +1,18 @@ +const DEFAULT_FILL = "#2d3436"; +const DEFAULT_STROKE = "#4cd137"; +const HLINE_COLOR = "#7f8c8d"; function _initCvs(ctx, width, height){ - ctx.fillStyle = "#000"; - ctx.strokeStyle = "#0f0"; + ctx.fillStyle = DEFAULT_FILL; + ctx.strokeStyle = DEFAULT_STROKE; } function _primer(ctx, width, height){ ctx.fillRect(0,0,width,height); - let backupStroke = ctx.strokeStyle; - ctx.strokeStyle = "#777"; + ctx.strokeStyle = HLINE_COLOR; ctx.beginPath(); ctx.moveTo(0, height / 2); ctx.lineTo(width, height / 2); ctx.stroke(); - ctx.strokeStyle = backupStroke; + ctx.strokeStyle = DEFAULT_STROKE; } function _drawRawOsc(ctx,data,width,height){ ctx.beginPath();