diff options
author | Chris Xiong <chirs241097@gmail.com> | 2019-02-09 00:00:53 +0800 |
---|---|---|
committer | Chris Xiong <chirs241097@gmail.com> | 2019-02-09 00:00:53 +0800 |
commit | e1af5e214c389aea2b55daf82bdec92472db3f19 (patch) | |
tree | 1505c4189104bf3c40db00d19844576ab6cae3fe /xp/vco/scripts | |
parent | 07493b94b141506e051b0adb9f68132ebfc583c0 (diff) | |
download | oddities-e1af5e214c389aea2b55daf82bdec92472db3f19.tar.xz |
Moving shitty stuff sitting around in the www folder here.
Diffstat (limited to 'xp/vco/scripts')
-rw-r--r-- | xp/vco/scripts/app.js | 129 | ||||
-rw-r--r-- | xp/vco/scripts/install.js | 37 | ||||
-rw-r--r-- | xp/vco/scripts/respond.js | 6 |
3 files changed, 172 insertions, 0 deletions
diff --git a/xp/vco/scripts/app.js b/xp/vco/scripts/app.js new file mode 100644 index 0000000..cec78be --- /dev/null +++ b/xp/vco/scripts/app.js @@ -0,0 +1,129 @@ +// fork getUserMedia for multiple browser versions, for those +// that need prefixes + +navigator.getUserMedia = (navigator.getUserMedia || + navigator.webkitGetUserMedia || + navigator.mozGetUserMedia || + navigator.msGetUserMedia); + +// set up forked web audio context, for multiple browsers +// window. is needed otherwise Safari explodes + +var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var source; +var stream; + +// grab the mute button to use below + +var mute = document.querySelector('.mute'); + +//set up the different audio nodes we will use for the app + +var analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; +analyser.smoothingTimeConstant = 0.85; + +var distortion = audioCtx.createWaveShaper(); +var gainNode = audioCtx.createGain(); +var biquadFilter = audioCtx.createBiquadFilter(); +var convolver = audioCtx.createConvolver(); + +// set up canvas context for visualizer + +var canvas = document.querySelector('.visualizer'); +var canvasCtx = canvas.getContext("2d"); +var bar = document.getElementById("bar"); +var intendedWidth = document.querySelector('.wrapper').clientWidth; + +canvas.setAttribute('width',intendedWidth*2); +canvas.style.width=intendedWidth+'px'; + + +var drawVisual; + +//main block for doing the audio recording + +if (navigator.getUserMedia) { +console.log('getUserMedia supported.'); +navigator.getUserMedia ( + // constraints - only audio needed for this app + { + audio: true + }, + + // Success callback + function(stream) { + source = audioCtx.createMediaStreamSource(stream); + source.connect(analyser); + analyser.connect(distortion); + distortion.connect(biquadFilter); + biquadFilter.connect(convolver); + convolver.connect(gainNode); + gainNode.connect(audioCtx.destination); + + visualize(); + + }, + + // Error callback + function(err) { + console.log('The following gUM error occured: ' + err); + } +); +} else { +console.log('getUserMedia not supported on your browser!'); +} + +function visualize() { + WIDTH = canvas.width; + HEIGHT = canvas.height; + analyser.fftSize = 2048; + var bufferLength = analyser.fftSize; + console.log(bufferLength); + var dataArray = new Uint8Array(bufferLength); + + canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + + var draw = function() { + + drawVisual = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + canvasCtx.beginPath(); + + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0, s = 0; + + for(var i = 0; i < bufferLength; i++) { + + var v = dataArray[i] / 128.0; + var t=Math.abs(dataArray[i]-128.)/128.0; + s+=t*t; + var y = v * HEIGHT/2; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + s/=bufferLength;s=Math.sqrt(s);s=1-s; + bar.style.width=100*s+'%'; + + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + }; + + draw(); + +} diff --git a/xp/vco/scripts/install.js b/xp/vco/scripts/install.js new file mode 100644 index 0000000..d44f1bb --- /dev/null +++ b/xp/vco/scripts/install.js @@ -0,0 +1,37 @@ +// get a reference to the install button +var button = document.getElementById('install-btn'); + +if(navigator.mozApps) { + +var manifest_url = location.href + 'manifest.webapp'; + +function install(ev) { + ev.preventDefault(); + // define the manifest URL + // install the app + var installLocFind = navigator.mozApps.install(manifest_url); + installLocFind.onsuccess = function(data) { + // App is installed, do something + }; + installLocFind.onerror = function() { + // App wasn't installed, info is in + // installapp.error.name + alert(installLocFind.error.name); + }; +}; + +//call install() on click if the app isn't already installed. If it is, hide the button. + +var installCheck = navigator.mozApps.checkInstalled(manifest_url); + +installCheck.onsuccess = function() { + if(installCheck.result) { + button.style.display = "none"; + } else { + button.addEventListener('click', install, false); + }; +}; + +} else { + button.style.display = "none"; +} diff --git a/xp/vco/scripts/respond.js b/xp/vco/scripts/respond.js new file mode 100644 index 0000000..e3dc2c0 --- /dev/null +++ b/xp/vco/scripts/respond.js @@ -0,0 +1,6 @@ +/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */ +/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */ +window.matchMedia=window.matchMedia||function(a){"use strict";var c,d=a.documentElement,e=d.firstElementChild||d.firstChild,f=a.createElement("body"),g=a.createElement("div");return g.id="mq-test-1",g.style.cssText="position:absolute;top:-100em",f.style.background="none",f.appendChild(g),function(a){return g.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',d.insertBefore(f,e),c=42===g.offsetWidth,d.removeChild(f),{matches:c,media:a}}}(document); + +/*! Respond.js v1.3.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */ +(function(a){"use strict";function x(){u(!0)}var b={};if(a.respond=b,b.update=function(){},b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,!b.mediaQueriesSupported){var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={},i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){for(var b=0;l.length>b;b++){var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({href:d,media:e}))}o()},o=function(){if(m.length){var b=m.shift();v(b.href,function(c){p(c,b.href,b.media),h[b.href]=!0,a.setTimeout(function(){o()},0)})}},p=function(a,b,c){var d=a.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),g=d&&d.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c;b.length&&(b+="/"),i&&(g=1);for(var j=0;g>j;j++){var k,l,m,n;i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.length;for(var o=0;n>o;o++)l=m[o],e.push({media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},s=function(){var a,b=c.createElement("div"),e=c.body,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)},u=function(b){var h="clientWidth",k=d[h],m="CSS1Compat"===c.compatMode&&k||c.body[h]||k,n={},o=l[l.length-1],p=(new Date).getTime();if(b&&q&&i>p-q)return a.clearTimeout(r),r=a.setTimeout(u,i),void 0;q=p;for(var v in e)if(e.hasOwnProperty(v)){var w=e[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?t||s():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?t||s():1)),w.hasquery&&(z&&A||!(z||m>=x)||!(A||y>=m))||(n[w.media]||(n[w.media]=[]),n[w.media].push(f[w.rules]))}for(var C in g)g.hasOwnProperty(C)&&g[C]&&g[C].parentNode===j&&j.removeChild(g[C]);for(var D in n)if(n.hasOwnProperty(D)){var E=c.createElement("style"),F=n[D].join("\n");E.type="text/css",E.media=D,j.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(c.createTextNode(F)),g.push(E)}},v=function(a,b){var c=w();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},w=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}();n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)}})(this); |