From e1af5e214c389aea2b55daf82bdec92472db3f19 Mon Sep 17 00:00:00 2001 From: Chris Xiong Date: Sat, 9 Feb 2019 00:00:53 +0800 Subject: Moving shitty stuff sitting around in the www folder here. --- xp/vco/scripts/app.js | 129 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 xp/vco/scripts/app.js (limited to 'xp/vco/scripts/app.js') 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(); + +} -- cgit v1.2.3