From b2042124e8cafd3252200052a4c6f8fabc02d8b3 Mon Sep 17 00:00:00 2001 From: FrustratedProgrammer Date: Sat, 29 Aug 2020 16:21:45 -0500 Subject: [PATCH] Made a separate file for the important JS. --- index.html | 1 + js/Mic.js | 65 +++++++++++++++++++++++ js/index.js | 149 +++++++++++++++------------------------------------- 3 files changed, 108 insertions(+), 107 deletions(-) create mode 100644 js/Mic.js diff --git a/index.html b/index.html index 4f88892..3462504 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,7 @@

+ diff --git a/js/Mic.js b/js/Mic.js new file mode 100644 index 0000000..74b375e --- /dev/null +++ b/js/Mic.js @@ -0,0 +1,65 @@ +/** + * Heavy credit to https://github.com/apm1467/html5-mic-visualizer + * Couldn't have done this without him. + */ +function Mic(){ + this.DB = 0; + this.audioContent; + this.started = false; + this.hasPermission = false; + this.fftSize = 1024; + this.updateTime = 50; + this._soundAllowed = (stream) => { + this.hasPermission = true; + let audioStream = this.audioContent.createMediaStreamSource( stream ); + let analyser = this.audioContent.createAnalyser(); + + analyser.fftSize = this.fftSize; + audioStream.connect(analyser); + + let bufferLength = analyser.frequencyBinCount; + let frequencyArray = new Uint8Array(bufferLength); + + let showVolume = () => { + setTimeout(showVolume, this.updateTime); + if (this.started) { + analyser.getByteFrequencyData(frequencyArray); + if(typeof this.onFrequency === "function") this.onFrequency(frequencyArray); + let total = 0 + for(let i = 0; i < 255; i++) { + let x = frequencyArray[i]; + total += x * x; + } + let rms = Math.sqrt(total / bufferLength); + let db = 20 * ( Math.log(rms) / Math.log(10) ); + db = Math.max(db, 0); // sanity check + if(db !== this.DB){ + this.DB = db; + if(typeof this.onDBChange === "function") this.onDBChange(this.DB); + } + } + } + showVolume(); + } + + this._soundNotAllowed = (error) => { + console.error('You must allow your microphone.'); + console.log(error); + } +} +Mic.prototype.start = function(){ + if (this.started) { + this.started = false; + } + else { + if (!this.hasPermission) { + this.audioContent = new AudioContext(); + navigator.mediaDevices.getUserMedia({audio:true}) + .then(this._soundAllowed) + .catch(this._soundNotAllowed); + } + this.started = true; + } +} +Mic.prototype.onDBChange = function(){} +Mic.prototype.onFrequency = function(){} diff --git a/js/index.js b/js/index.js index 9cde040..3c2c9cc 100644 --- a/js/index.js +++ b/js/index.js @@ -1,112 +1,47 @@ -window.onload = function () { - "use strict"; - var paths = document.getElementsByTagName('path'); - var visualizer = document.getElementById('visualizer'); - var mask = visualizer.getElementById('mask'); - var h = document.getElementsByTagName('h1')[0]; - var hSub = document.getElementsByTagName('h1')[1]; - var AudioContext; - var audioContent; - var start = false; - var permission = false; - var path; - var seconds = 0; - var loud_volume_threshold = 30; - - var soundAllowed = function (stream) { - permission = true; - var audioStream = audioContent.createMediaStreamSource( stream ); - var analyser = audioContent.createAnalyser(); - var fftSize = 1024; - - analyser.fftSize = fftSize; - audioStream.connect(analyser); - - var bufferLength = analyser.frequencyBinCount; - var frequencyArray = new Uint8Array(bufferLength); - - visualizer.setAttribute('viewBox', '0 0 255 255'); - - for (var i = 0 ; i < 255; i++) { - path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - path.setAttribute('stroke-dasharray', '4,1'); - mask.appendChild(path); - } - var doDraw = function () { - requestAnimationFrame(doDraw); - if (start) { - analyser.getByteFrequencyData(frequencyArray); - var adjustedLength; - for (var i = 0 ; i < 255; i++) { - adjustedLength = Math.floor(frequencyArray[i]) - (Math.floor(frequencyArray[i]) % 5); - paths[i].setAttribute('d', 'M '+ (i) +',255 l 0,-' + adjustedLength); - } - } - else { - for (var i = 0 ; i < 255; i++) { - paths[i].setAttribute('d', 'M '+ (i) +',255 l 0,-' + 0); - } - } +let mic = new Mic(); +var h = document.getElementsByTagName("h1")[0]; +var hSub = document.getElementsByTagName("h1")[1]; +let seconds = 0; +mic.onDBChange = function(DB){ + h.innerHTML = Math.round(DB) + " dB"; + if (DB >= 30) { + seconds += 1/mic.updateTime; + if (seconds >= 5) { + hSub.innerHTML = "You’ve been in loud environment for " + Math.floor(seconds) + " seconds." ; } - var showVolume = function () { - setTimeout(showVolume, 500); - if (start) { - analyser.getByteFrequencyData(frequencyArray); - var total = 0 - for(var i = 0; i < 255; i++) { - var x = frequencyArray[i]; - total += x * x; - } - var rms = Math.sqrt(total / bufferLength); - var db = 20 * ( Math.log(rms) / Math.log(10) ); - db = Math.max(db, 0); // sanity check - h.innerHTML = Math.floor(db) + " dB"; - - if (db >= loud_volume_threshold) { - seconds += 0.5; - if (seconds >= 5) { - hSub.innerHTML = "You’ve been in loud environment for " + Math.floor(seconds) + " seconds." ; - } - } - else { - seconds = 0; - hSub.innerHTML = ""; - } - } - else { - h.innerHTML = ""; - hSub.innerHTML = ""; - } - } - - doDraw(); - showVolume(); } - - var soundNotAllowed = function (error) { - h.innerHTML = "You must allow your microphone."; - console.log(error); + else { + seconds = 0; + hSub.innerHTML = ""; } +}; +mic.onFrequency = function(frequencyArray){ + let adjustedLength; + for(let i = 0; i < 255; i++){ + adjustedLength = Math.floor(frequencyArray[i]) - (Math.floor(frequencyArray[i]) % 5); + paths[i].setAttribute("d", "M " + (i) + ",255 l 0,-" + adjustedLength); + } +}; +var paths = document.getElementsByTagName("path"); +var visualizer = document.getElementById("visualizer"); +var mask = visualizer.getElementById("mask"); +document.getElementById("button").onclick = function(){ + mic.start(); + if(!mic.started){ - - document.getElementById('button').onclick = function () { - if (start) { - start = false; - this.innerHTML = "Start Listen"; - this.className = "green-button"; - } - else { - if (!permission) { - navigator.mediaDevices.getUserMedia({audio:true}) - .then(soundAllowed) - .catch(soundNotAllowed); - - AudioContext = window.AudioContext || window.webkitAudioContext; - audioContent = new AudioContext(); - } - start = true; - this.innerHTML = "Stop Listen"; - this.className = "red-button"; + this.innerHTML = "Start Listen"; + this.className = "green-button"; + } + else{ + h.innerHTML = "Listening"; + visualizer.setAttribute("viewBox", "0 0 255 255"); + let path; + for(var i = 0; i < 255; i++){ + path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + path.setAttribute("stroke-dasharray", "4,1"); + mask.appendChild(path); } - }; -}; \ No newline at end of file + this.innerHTML = "Stop Listen"; + this.className = "red-button"; + } +};